CODEWITHSUNDEEP
cssz-indexcss-position
Tina
Tina

Reputation: 491

z-index issue with several absolute positioned elements

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

Answers (1)

Kyle
Kyle

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

Related Questions