Menu
I'm trying to set up a simple horizontal tab structure for a page I'm working on, and I'm running into some trouble with floating div's combined with z-index.
Viewing the following code in a browser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> #main { width: 500px; z-index: 1;} .left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 2; margin-right: -2px } .right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; } .clear { clear: both; } </style> </head> <body> <div id="main"> <div class="left"> LEFT </div> <div class="right"> RIGHT <br /> RIGHT </div> <div class="clear"></div> </div> </body> </html> Why doesn't the left div's orange border overlap the right div's green border?
711
Using CSS Z-Index property developer can stack elements onto one another. Z-Index can have a positive or a negative value. NOTE − If elements that overlap do not have z-index specified then that element will show up that is mentioned last in document.
z-index only affects elements that have a position value other than static (the default). Elements can overlap for a variety of reasons, for instance, relative positioning has nudged it over something else. Negative margin has pulled the element over another. Absolutely positioned elements overlap each other.
All that is needed to fix this is “min-height” and “min-width” in your CSS. this makes a Div responsive. minimum height will prevent the Divs from overlapping on each other.
z-index property will not apply to statically positioned elements. In order to use z-index the CSS must also include any position value other than static (ie relative, absolute, fixed).
.left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 3; margin-right: -2px; position: relative; } .right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 2; position: relative; } Will give you what you want I think. I added position: relative; and changed the z-index of the .left to 3 (from 2) and changed the z-index of .right to 2 (from 3).
90
z-index has no effect on elements that are not positioned (eg position:absolute;)
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
