CODEWITHSUNDEEP
css
Downhillski
Downhillski

Reputation: 2655

How to adjust the z-index for two div

See the sample code here, without changing the html structure, is there a pure css way to re-order #b to shown in between #a and #c?

Question Update:

There is a condition that the position rule can not be change because of the UI restriction.

#a {
  position: relative;
  background-color: red;
  width: 200px;
  height: 200px;
}
#b {
  position: absolute;
  top: 0;
  left: 30px;
  background-color: green;
  width: 100px;
  height: 100px;
}
#c {
  position: absolute;
  background-color: blue;
  width: 50px;
  height: 50px;
}
<div id="a">
  <div id="c"></div>
</div>
<div id="b"></div>

Upvotes: 0

Views: 1830

Answers (2)

Rajesh Patel
Rajesh Patel

Reputation: 2036

Try to add z-index:100; for #b and z-index:1000; for #c

HTML part 

<div id="a">
  <div id="c"></div>
</div>
<div id="b"></div>

CSS Part

div {
  position: absolute;
}
#a {
    background-color: red;
    width: 200px;
    height: 200px;
}
#b {
    background-color: green;
    width: 100px;
    height: 100px;
    z-index: 100;
}
#c {
    background-color: blue;
    width: 50px;
    height: 50px;
    z-index: 1000;
}

Upvotes: 1

litel
litel

Reputation: 3980

If you want #c to be shown in the corner of the square, just give it a z-index of any number (ie z-index: 30). The z-index property allows you to change the stacking order of an element, so #c will now be in front of #b and #a.

div {
  position: absolute;
}
#a {
  background-color: red;
  width: 200px;
  height: 200px;
}
#b {
  background-color: green;
  width: 100px;
  height: 100px;
}
#c {
  background-color: blue;
  width: 50px;
  z-index: 30;
  height: 50px;
}
<div id="a">
  <div id="c"></div>
</div>
<div id="b"></div>

Upvotes: 1

Related Questions