按钮在固定位置 div 内变得无响应
我使用固定在 上的位置，#zoom-controls因此当我滚动时它button会停留在屏幕顶部。在我添加position: fixed到之前div，按钮工作，但如果我添加position: fixed变得button没有反应。
在 fiddlejs 上玩过之后，我发现如果你删除svgbuttons div 的兄弟，即使 div 是固定的，按钮也能工作。我需要svg留下来。
svg这是带有 - 的代码，position: fixed所以它不起作用：
var butt = document.getElementById('zoom_in');
butt.addEventListener('click', () => {
var body = document.getElementById('body');
var p = document.createElement('p');
p.textContent = 'pressed';
body.appendChild(p);
});
.draggable {
cursor: move;
}
.pdf-page-canvas {
display: block;
margin: 5px auto;
border: 1px solid rgba(0, 0, 0, 0.2);
z-index: 0;
}
.canvas_container {
width: 100%;
/* height: 100%; */
z-index: 0;
position: absolute;
}
#svg {
position: absolute;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body id="body">
<div id="zoom-controls" style='position:fixed'>
<button id="zoom_in">+</button>
</div>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" preserveAspectRatio="none"></svg>
</body>
</html>
慕沐林林1回答
-
斯蒂芬大帝
您的按钮容器位于所有内容下方。添加z-index到它，它将起作用。.draggable { cursor: move;}.pdf-page-canvas { display: block; margin: 5px auto; border: 1px solid rgba(0, 0, 0, 0.2); z-index: 0;}.canvas_container { width: 100%; /* height: 100%; */ z-index: 0; position: absolute;}#zoom-controls { z-index: 3;}#svg { position: absolute; z-index: 1;}<body> <div id="zoom-controls" style='position:fixed'> <button id="zoom_in">+</button> </div> <svg id='svg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" preserveAspectRatio="none"></svg></body>
随时随地看视频慕课网APP
相关分类
JavaScript