How do I overlay one div over another div?

Matthew C.

The Problem

You want to overlay a <div> over another <div>. For example, you have two <div> elements in a container:

<div class="container">
  <div class="item item1">item 1</div>
  <div class="item item2">item 2</div>
</div>
Click to Copy

You want the second item to be on top of the first item. How do you do this?

The Solution

You can set the position of the <div> that you want to be the overlay to absolute. This removes the item 2 <div> from the normal document flow so that no space is created for item 2 in the page layout. Set the position of the container to relative so that you can position item 2 relative to the container. You can then position item 2 using the top, right, bottom, and left CSS properties so that it is placed on top of item 1:

.container {
  position: relative;
}

.item {
  width: 150px;
  height: 150px;
  border: 1px solid black;
}

.item1 {
  background: blue;
}

.item2 {
  top: 20px;
  left: 40px;
  position: absolute;
  background: red;
}
Click to Copy

We moved item 2 20px from the top and 40px from the left of the container that item 2 is positioned relative to. This places item 2 on top of item 1. If you have multiple items, you can change the stacking order of items using the z-index property. A new stacking context is created by an element when the element has a position value of relative or absolute and the z-index value is not auto, which is the default value. The stacking order of elements is relative to their stacking context. Note that new stacking contexts can also be created by specific CSS properties such as flex, grid, opacity, transform, and filter, as described here.