CODEWITHSUNDEEP
cssz-index
Oblomingo
Oblomingo

Reputation: 698

How to set Z-index to nested elements?

I have two base DOM elements and two inner elements.

But it doesn't.

#grey_box {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
  background: #ddd;
  position: relative;
  z-index: 10;
}
#blue_box {
  width: 200px;
  height: 200px;
  border: solid 1px #4a7497;
  background: #8daac3;
  position: relative;
  z-index: 20;
  margin-left: 80px;
  margin-top: -50px;
}
#grey_inner_box {
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
  z-index: 200;
  margin-top: 80px;
  margin-left: 150px;
}
#blue_inner_box {
  width: 50px;
  height: 50px;
  background: green;
  position: relative;
  z-index: 100;
  margin-left: 40px;
  margin-top: -40px;
}
<div id="grey_box">
  <div id="grey_inner_box">grey inner</div>
</div>
<div id="blue_box">
  <div id="blue_inner_box">blue inner</div>
</div>

What am I doing wrong?

Upvotes: 3

Views: 636

Answers (2)

Felix A J
Felix A J

Reputation: 6480

Remove the z-index from #grey_box. Since #grey_box is beneath all other divs, we dont need z-index there. This helps to bring the #grey_inner_box to top.

#grey_box {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
  background: #ddd;
  position: relative;
  /* z-index: 10; */
}
#blue_box {
  width: 200px;
  height: 200px;
  border: solid 1px #4a7497;
  background: #8daac3;
  position: relative;
  z-index: 20;
  margin-left: 80px;
  margin-top: -50px;
}
#grey_inner_box {
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
  z-index: 200;
  margin-top: 110px;
  margin-left: 150px;
}
#blue_inner_box {
  width: 50px;
  height: 50px;
  background: green;
  position: relative;
  z-index: 100;
  margin-left: 40px;
  margin-top: -40px;
}
<div id="grey_box">
  <div id="grey_inner_box">grey inner</div>
</div>
<div id="blue_box">
  <div id="blue_inner_box">blue inner</div>
</div>

Upvotes: 1

Quentin
Quentin

Reputation: 943601

What you want isn't possible.

Once you set an element to position: anything except static, it establishes a new stacking context.

Anything you set the z-index of inside it, is only positioned within it.

Take this for example:

<div id="box1">
    <div id="paper1"></div>
    <div id="paper2"></div>
    <div id="paper3"></div>
</div>

<div id="box2">
    <div id="paper4"></div>
    <div id="paper5"></div>
    <div id="paper6"></div>
</div>

Inside each box, you can put the papers in any order you like. You can put box1 on top of box2 or vice versa, but when you move a box, you take the papers inside the box with it.

If you want to overlap the papers in the different boxes, you need to take them out of the boxes first.

Upvotes: 7

Related Questions