3

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Title</title>
 <style>
  .red {
   height: 200px;
   background-color: red;
  }
  .green {
   height: 300px;
   background-color: green;
   width: 200px;
  }
  .yellow {
   height: 400px;
   background-color: yellow;
  }
 </style>
</head>
<body>
 <div class="red">
  <div class="green"></div>
 </div>
 <div class="yellow"></div>
</body>
 
<script>
 
</script>
</html>

As the code show above, the height of the green div is 300px. However, it does not show fully because it is covered by the yellow div.

So I want to ask how to show the green div fully so that it can show like below.

hellozjf
  • 169
  • 5
  • 16

5 Answers5

2

Add a z-index attribute to your styles. Another great resource: w3schools

Also, change the height of .green to 600px so it covers the whole screen:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Title</title>
  <style>
    .red {
      height: 200px;
      background-color: red;
      z-index: 0;
    }
    
    .green {
      height: 600px;
      position: absolute;
      background-color: green;
      width: 200px;
      z-index: 99;
    }
    
    .yellow {
      height: 400px;
      background-color: yellow;
      z-index: -1;
    }
  </style>
</head>

<body>
  <div class="green"></div>
  <div class="red"></div>


  <div class="yellow"></div>
</body>

<script>
</script>

</html>

This will put the green div on top of anything with a lower z-index, because 10 > 1

CootMoon
  • 522
  • 4
  • 22
2

.red {
  height: 200px;
  background-color: red;
}

.green {
  height: 300px;
  background-color: green;
  width: 200px;
  display: inline-table;
}

.yellow {
  height: 400px;
  background-color: yellow;
}
<div class="red">
  <div class="green"></div>
</div>
<div class="yellow"></div>

You can use display: inline-table:

.green {
    height: 300px;
    background-color: green;
    width: 200px;
    display: inline-table;
}
a stone arachnid
  • 1,272
  • 1
  • 15
  • 27
Hien Nguyen
  • 24,551
  • 7
  • 52
  • 62
1

Play with the z-index like so:

       .red {
       height: 200px;
       background-color: red;
          z-index: 1;
      }
      .green {
       height: 300px;
       background-color: green;
       width: 200px;
          z-index: 99; 
          float:left; 
      }
      .yellow {
       height: 400px;
       background-color: yellow;
          z-index: -1;
      }
<div class="red">
  <div class="green"></div>
 </div>
 <div class="yellow"></div>
kapitan
  • 2,008
  • 3
  • 20
  • 26
  • z-index are completely useless in your case, they only works with positionned element ... remove them and you will have the same output. The trick is the float element – Temani Afif Feb 28 '19 at 09:20
1

You only need to make the green div positionned. Nothing more.

.red {
  height: 200px;
  background-color: red;
}

.green {
  height: 300px;
  background-color: green;
  width: 200px;
  position: relative;
}

.yellow {
  height: 400px;
  background-color: yellow;
}
<div class="red">
  <div class="green"></div>
</div>
<div class="yellow"></div>

Or the red one:

.red {
  height: 200px;
  background-color: red;
  position: relative;
}

.green {
  height: 300px;
  background-color: green;
  width: 200px;
}

.yellow {
  height: 400px;
  background-color: yellow;
}
<div class="red">
  <div class="green"></div>
</div>
<div class="yellow"></div>

By default, the painting order will first paint the green and red then yellow following the tree order but making one of them to be positonned will make this one to painted later.

Some related questions to get more details about the painting order:

Why does position:relative; appear to change the z-index?

Why using absolute position causes the div to be on top?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
1

Just add position: relative for red class.

morten.c
  • 3,414
  • 5
  • 40
  • 45
tanvi korgaonkar
  • 363
  • 1
  • 6