Menu
I have two divs float:left. I z-index the first div to be above, but it doesn't work. Is this because floated elements are not positioned?
<html>
<style>
#wrap{
background:#666;
}
#menu, #thumbs{
float:left;
}
#menu{
background:#06C;
z-index:10;
}
#thumbs{
background:#0CF;
margin-left:-20px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="menu">
<p>menu</p>
</div>
<div id="thumbs">
<p>thumbs</p>
</div>
</div>
</body>
</html>
693
In CSS code bases, you'll often see z-index values of 999, 9999 or 99999. This is a perhaps lazy way to ensure that the element is always on top. It can lead to problems down the road when multiple elements need to be on top.
Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed ).
The z-index property determines the stack level of an HTML element. The “stack level” refers to the element's position on the Z axis (as opposed to the X axis or Y axis). A higher value means the element will be closer to the top of the stacking order. This stacking order runs perpendicular to the display, or viewport.
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.
You need to set the position property. Adding position:relative to #menu displays the menu div above thumbs.
97
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
