Reputation: 491
Is it possible to bring an element into foreground that is inside an absolute positioned element and lying under another absolute positioned element?
For example:
<div id="el1">
<div id="test1">Test 1</div>
</div>
<div id="el2">
<div id="test2">Test 2</div>
</div>
CSS:
#el1, #el2, #test1, #test2 {
position: absolute;
top: 0;
left: 0;
}
#el1 {
z-index: 2;
}
#el2 {
z-index: 1;
}
#test1, #test2 {
z-index: 3;
}
All elements are absolute positioned and the first is lying over the second. Now I want to have both test-elements in the foreground. That's not possible because for the second the z-index does not apply because it's inside #el2. Is there any solution for this or do I have to put the test-elements outside the others?
Upvotes: 1
Views: 1045
Reputation: 67244
The child elements will inherit the parents' z-index
. You will have to change the structure of your markup to refelect the desired z-indexing.
<div id="el1">
</div>
<div id="el2">
</div>
<div id="test1">Test 1</div>
<div id="test2">Test 2</div>
Upvotes: 2