Button becomes unresponsive inside fixed position 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. Before I added position: fixed to the div , the buttons worked, but if I add position: fixed the button becomes unresponsive.
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. I need the svg to stay.
Here is the code with the svg and the position: fixed - so it's not working:
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 answers
solution1
2 ACCPTED 2020-09-07 19:27:05
Your button container is below all of the content. Add z-index to it, and it will work.
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.