按鈕在固定位置 div 內變得無響應
[英]Button becomes unresponsive inside fixed position div
問題描述
我正在使用#zoom-controls上的固定位置，因此當我滾動時button會停留在屏幕頂部。 在我添加position: fixed到div ，按鈕工作，但如果我添加position: fixed button變得無響應。
在 fiddlejs 上玩弄它之后，我發現如果你刪除svg ，它是按鈕 div 的兄弟，即使 div 是固定的，按鈕也能工作。 我需要留下svg 。
這是帶有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>
1 個解決方案
解決方案1
2 已采納 2020-09-07 19:27:05
您的按鈕容器位於所有內容下方。 將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內單擊？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.