Why doesn't z-index allow the OK button to be clickable?

September 12, 2022

I have a #popup-shadow div that takes all the viewport, in order to make #popup modal, and prevent everything out of #popup to be clickable. This works.

Problem: it even makes everything inside #popup unclickable. Why?

Since #popup has a higher z-index (value 100!), why is the OK button unclickable?

#popup-shadow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
#popup { width: 400px; background-color: #eee; z-index: 100; }
#popup-buttons div { font-size: 2em; text-align: center; 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>

Note: if we remove <div id="popup-shadow"></div>, it works.

>Solution :

z-index doesn’t affect unpositioned elements. add position :relative e.g. to popup

#popup-shadow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
#popup { position:relative; width: 400px; background-color: #eee; z-index: 100; }
#popup-buttons div { font-size: 2em; text-align: center; 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>