css - Negative z-index of an element that has a positive z-index -


i have following code

<!doctype html> <html> <head> <style type="text/css">   #nav {     color:white;     position:fixed;     z-index: 1;     height:30px;     top:0;     left:0;     right:0;     background:blue;    }   #controls {     position:fixed;     z-index:-10;     top:30px;     left:0;     right:0;     bottom:0;     background:red;   } </style> </head> <body> <div id="content">   <div id="nav">     <span>icon</span>     <div id="controls">hidden controls</div>   </div>   <p>hello world</p> </div> </body> </html> 

the #controls visible because parent element has z-index greater #content. there way set #controls have z-index less #content such invisible?


Comments

Popular posts from this blog

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -