Overlapping Div

by phollome

HTML

<div id="container">
  <div id="top"></div>
  <div id="bottom"></div>
</div>

CSS

body, div {
  margin: 0;
  padding: 0;
}

body {
  background: yellow; 
}

#container {
  width: 80vw;
  height: 80vh;
  margin: 10vh 10vw;
  background: red;
  position: relative;
}

#top, #bottom {
  position: absolute;
  width: 50vw;
  height: 50vh;
}

#top {
  background: lightgreen;
  left: 0;
  top: 0;
  z-index: 5;
}

#bottom {
  background: skyblue;
  top: 30vh;
  left: 30vw;
  z-index: 4;
}