为什么 z-index 在文本中不起作用，即使它已设置？

Question

So, I have this example of an html form:

 function submit(){ document.getElementById('load').style.width = "80%"; }

 .load{ border-radius:12px; background-color:#00ff88; height:80%; position:relative; z-index:2; top:0; display:block; width:0; transition: 1.5s ease-in; margin:5% auto 15% auto; position:fixed; top:2.5%; left:10%; }.load:hover{ border-radius: 8px; } body {font-family: Noto Sans, IBM Plex Sans Condensed; overflow:hidden;} * {box-sizing: border-box; /* Set a style for all buttons */ button { border-radius: 12px; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9; transition: 0.3s ease; font-size: 15px; font-weight: bold; outline-style: solid; outline-width:1px; } button:hover { border-radius: 5px; opacity:1; } /* Extra styles for the cancel button */.cancelbtn { padding: 14px 20px; background-color: #f44336; } /* Float cancel and signup buttons and add an equal width */.cancelbtn, .signupbtn, .refreshbtn { float: left; width: 100%; } /* Add padding to container elements */.container { padding: 16px; border-radius: 12px; box-shadow: 5px 5px 40px -1px rgba(10,10,10,0.74); transition: .6s ease; }.container:hover { box-shadow: 10px 10px 40px -3px rgba(10,10,10,0.74); border-radius: 5px; }.clearfix > p{ position:fixed; bottom:15%; left:40%; margin-top: 0%; vertical-align: top; } #options{ overflow-y:scroll; } }

 <div class="center load" id="load" style="position: absolute"></div> <div class="container modal-content" style="height:80%;max-height:100%;position:fixed;top:2.5%;left:10%;z-index:1;" id="quiz"> <div id="content" style="z-index: 50;position:relative;background-color:rgba(255, 255, 255, 0)"> <h1 id="Qtitle">Example Poll [title]</h1> <hr> <div id="options" style="display: block;"> <p style="font-size:20px;" onclick="select('option1')"><input type="radio" name="cXVlc3Rpbwo" value="1" id="option1"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="first" onclick="select('option1')"><b>[Option1]</b></label></p> <p style="font-size:20px;" onclick="select('option2')"><input type="radio" name="cXVlc3Rpbwo" value="2" id="option2"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="second" onclick="select('option2')"><b>[Option2]</b></label></p> <p style="font-size:20px;" onclick="select('option3')"><input type="radio" name="cXVlc3Rpbwo" value="3" id="option3"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="third" onclick="select('option3')"><b>[Option3]</b></label></p> <p style="font-size:20px;" onclick="select('option4')"><input type="radio" name="cXVlc3Rpbwo" value="4" id="option4"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="fourth" onclick="select('option4')"><b>[Option4]</b></label></p> </div> <input name="UUNvZGU" style="display:none;" id="QCode" value="error"> <br> <hr> <div class="clearfix" style="margin-bottom:50%;margin-top:0%;"> <button class="signupbtn" onclick="submit()" id="submit">Vote</button> </div> </div> </div> <script> function submit(){ document.getElementById('load').style.width = "80%"; } </script>

As you can see, even though the back div's z-index is 1, the green div's is 2 and the text's is 50, the green div grows over the text.

Any suggestions?

(Sorry for the terrible snippet quality, but, my project is 3000 lines long and I got a bit confused. Please run the snippet in full screen instead).

Answer 1

If you give the green div a z-index that is lower than the z-index of the form, then everything should work as you wanted.

I gave the green div a height and a width too see it. Then i gave it a z-index of 0 (Remove the height and the width !!! I just added that to show)

Here's an image of what i added:

Here is how it looks like now:

Here's the code:

 .load{ border-radius:12px; background-color:#00ff88; height:80%; position:relative; z-index:2; top:0; display:block; width:0; transition: 1.5s ease-in; margin:5% auto 15% auto; position:fixed; top:2.5%; left:10%; /* I gave the green div a height and a width too see it */ height: 100px; width: 100px; /* z-index for the green Div */ z-index: 0; }.load:hover{ border-radius: 8px; } body {font-family: Noto Sans, IBM Plex Sans Condensed; overflow:hidden;} * {box-sizing: border-box; /* Set a style for all buttons */ button { border-radius: 12px; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9; transition: 0.3s ease; font-size: 15px; font-weight: bold; outline-style: solid; outline-width:1px; } button:hover { border-radius: 5px; opacity:1; } /* Extra styles for the cancel button */.cancelbtn { padding: 14px 20px; background-color: #f44336; } /* Float cancel and signup buttons and add an equal width */.cancelbtn, .signupbtn, .refreshbtn { float: left; width: 100%; } /* Add padding to container elements */.container { padding: 16px; border-radius: 12px; box-shadow: 5px 5px 40px -1px rgba(10,10,10,0.74); transition: .6s ease; }.container:hover { box-shadow: 10px 10px 40px -3px rgba(10,10,10,0.74); border-radius: 5px; }.clearfix > p{ position:fixed; bottom:15%; left:40%; margin-top: 0%; vertical-align: top; } #options{ overflow-y:scroll; } }

 <div class="center load" id="load" style="position: absolute"></div> <div class="container modal-content" style="height:80%;max-height:100%;position:fixed;top:2.5%;left:10%;z-index:1;" id="quiz"> <div id="content" style="z-index: 50;position:relative;background-color:rgba(255, 255, 255, 0)"> <h1 id="Qtitle">Example Poll [title]</h1> <hr> <div id="options" style="display: block;"> <p style="font-size:20px;" onclick="select('option1')"><input type="radio" name="cXVlc3Rpbwo" value="1" id="option1"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="first" onclick="select('option1')"><b>[Option1]</b></label></p> <p style="font-size:20px;" onclick="select('option2')"><input type="radio" name="cXVlc3Rpbwo" value="2" id="option2"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="second" onclick="select('option2')"><b>[Option2]</b></label></p> <p style="font-size:20px;" onclick="select('option3')"><input type="radio" name="cXVlc3Rpbwo" value="3" id="option3"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="third" onclick="select('option3')"><b>[Option3]</b></label></p> <p style="font-size:20px;" onclick="select('option4')"><input type="radio" name="cXVlc3Rpbwo" value="4" id="option4"><label style="cursor:pointer;" for="cXVlc3Rpbwo" id="fourth" onclick="select('option4')"><b>[Option4]</b></label></p> </div> <input name="UUNvZGU" style="display:none;" id="QCode" value="error"> <br> <hr> <div class="clearfix" style="margin-bottom:50%;margin-top:0%;"> <button class="signupbtn" onclick="submit()" id="submit">Vote</button> </div> </div> </div> <script> function submit(){ document.getElementById('load').style.width = "80%"; } </script>