按钮在固定位置内变得无响应 div

Question

我使用固定在 #zoom-controls 上的位置，因此 button 在我滚动时会停留在屏幕顶部。在我将 position: fixed 添加到 div 之前，按钮可以正常工作，但如果我添加 position: fixed，button 将变得无响应。

在 fiddlejs 上玩弄之后，我发现如果删除 svg，它是按钮 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>

Answer 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>

按钮在固定位置内变得无响应 div

Button becomes unresponsive inside fixed position div

html

javascript

css

position

button