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.
CodePudding user response:
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>
CodePudding user response:
You have to add position: relative;
to #popup
Then it will become :
#popup { width: 400px; background-color: #eee; z-index: 100; position: relative; }