Question

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?

Answer 1

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>