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
Post a Comment