CODEWITHSUNDEEP
htmlcss
Hotdot Cyber
Hotdot Cyber

Reputation: 393

Layering a div content on top of another div

I am trying to put a div at the centre . Thats works well but it is not visible on the lower div. i.e the lower div hides the content of the center div. My html code :

.outerWrap {
  position: relative;
  z-index: 0;
  background-color: #00CCFF;
  height: 350px;
  width: 650px;
}

.layer1 {
  position: absolute;
  z-index: 1;
  background-color: #6F0;
  height: 250px;
  width: 350px;
  top: 240px;
  left: 40px;
}

.layer2 {
  position: absolute;
  z-index: 2;
  background-color: #FC0;
  height: 250px;
  width: 650px;
  top: 350px;
  left: 0px;
}
<div class="outerWrap">1
  <div class="layer1">2</div>
  <div class="layer2">3</div>
</div>

Upvotes: 0

Views: 60

Answers (2)

Manjuboyz
Manjuboyz

Reputation: 7066

Few things:

  1. You don't have to use z-index for all the div's, if you want a specific div to be in front then just give z-index to that.

  2. Since you already using div in your code, the div will sit beneath another be default and in your case layer-1 you want that to be in the front, so just use the z-index only for that and remove for others.

  3. The higher the z-index value it display up-front.(in my code it is simple z-index:1`.)

.outerWrap {
  position: relative;
  background-color: #00CCFF;
  height: 350px;
  width: 650px;
}

.layer1 {
  position: absolute;
  z-index: 1;
  background-color: #6F0;
  height: 250px;
  width: 350px;
  top: 240px;
  left: 40px;
}

.layer2 {
  position: absolute;
  background-color: #FC0;
  height: 250px;
  width: 650px;
  top: 350px;
  left: 0px;
}
<div class="outerWrap">1
  <div class="layer1">2</div>
  <div class="layer2">3</div>
</div>

Upvotes: 1

John
John

Reputation: 5335

You got your z-index backwards. put layer1 at 2 and layer2 at 1

.outerWrap {
  position: relative;
  z-index: 0;
  background-color: #00CCFF;
  height: 350px;
  width: 650px;
}

.layer1 {
  position: absolute;
  z-index: 2;
  background-color: #6F0;
  height: 250px;
  width: 350px;
  top: 240px;
  left: 40px;
}

.layer2 {
  position: absolute;
  z-index: 1;
  background-color: #FC0;
  height: 250px;
  width: 650px;
  top: 350px;
  left: 0px;
}
<div class="outerWrap">1
  <div class="layer1">2</div>
  <div class="layer2">3</div>
</div>

Upvotes: 1

Related Questions