Menu
I have a problem with z-index and my code. I want to have a popup on every row, positioned relative to that row. So I created this code:
<div class="level1"> <div class="level2"> <input type="text" value="test1" /> <div class="popup">test1</div> </div> <div class="level2"> <input type="text" value="test2" /> <div class="popup">test2</div> </div> </div> with te following style
.level1 { position:relative; z-index:2; } .level2 { position:relative; z-index:3; } .popup { position:absolute; left:0px; top:10px; width:100px; height:100px; background:yellow; z-index:4; } 
601
Yes: use position:relative; z-index:10 . z-index has no effect for position:static (the default).
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.
The z-index of elements inside of a stacking context are always relative to the parent's current order in its own stacking context. The <html> element is a stacking context itself and nothing can ever go behind it.
Since the default z-index value for page elements is 0, elements with a negative z-index value appear behind elements without a set z-index value.
When you set position: relative on an element then you establish a new containing block. All positioning inside that block is with respect to it.
Setting z-index on an element inside that block will only alter its layer with respect to other elements inside the same block.
I'm not aware of any work-arounds.
142
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
