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

Question

I'm using position fixed on the #zoom-controls so the button would stay at the top of the screen as I scroll.我正在使用#zoom-controls上的固定位置，因此当我滚动时button会停留在屏幕顶部。 Before I added position: fixed to the div , the buttons worked, but if I add position: fixed the button becomes unresponsive.在我添加position: fixed到div ，按钮工作，但如果我添加position: fixed button变得无响应。

After playing around with it on fiddlejs I found out that if you remove the svg , which is a sibling of the buttons div, the button works even if the div is fixed.在 fiddlejs 上玩弄它之后，我发现如果你删除svg ，它是按钮 div 的兄弟，即使 div 是固定的，按钮也能工作。 I need the svg to stay.我需要留下svg 。

Here is the code with the svg and the position: fixed - so it's not working:这是带有svg和position: fixed的代码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

Your button container is below all of the content.您的按钮容器位于所有内容下方。 Add z-index to it, and it will work.将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 内变得无响应

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-09-07 19:27:05

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-09-07 19:27:05

解决方案1
2 已采纳 2020-09-07 19:27:05