Sunday, October 2, 2022
HomeCSShtml - Why would not z-index permit the OK button to be...

html – Why would not z-index permit the OK button to be clickable?


I’ve a #popup-shadow div that takes all of the viewport, so as to make #popup modal, and forestall all the things out of #popup to be clickable. This works.

Drawback: it even makes all the things inside #popup unclickable. Why?

Since #popup has the next z-index (worth 100!), why is the OK button unclickable?

#popup-shadow { place: fastened; prime: 0; left: 0; width: 100%; top: 100%; z-index: 10; }
#popup { width: 400px; background-color: #eee; z-index: 100; }
#popup-buttons div { font-size: 2em; text-align: heart; padding: 15px 0; }
#popup-buttons div:hover { cursor: pointer; }
<div id="popup-wrapper">
    <div id="popup-shadow"></div>    
    <div id="popup">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        <div id="popup-buttons">
            <div onclick="alert();">OK</div>
        </div>
    </div>
</div>

Notice: if we take away <div id="popup-shadow"></div>, it really works.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments