How can I get overlapping divs with relative positions?

Question

Wrap an absolute positioned div with a relative positioned div:

.container {
  position: relative;
  width: 200px;
  height: 100px;
  top: 100px;
  background: yellow
}

.one {
  z-index: 1;
  position: absolute;
  width: 100px;
  height: 20px;
  background: red;
}

.two {
  z-index: 2;
  position: absolute;
  width: 100px;
  height: 20px;
  background: blue;
  left: 10px;
  top: 10px;
}

<div class="container">
  <div class="one">a</div>
  <div class="two">b</div>
</div>

Unlike negative margin this method is more dynamic with HTML.
To reposition the inner divs, adjust the top/left/right/bottom CSS properties or JS of the container.

Leave a Comment Cancel reply