How to overlay one div over another div?

Question

Aryan Kumar · Answer

To overlay one div over another div, you can use the following CSS properties:

position: This property determines how an element is positioned relative to its parent element. The two most common values for this property are absolute and relative.
z-index: This property determines the stacking order of elements. An element with a higher z-index will appear in front of an element with a lower z-index.

For example, the following CSS code will overlay a div with the class overlay over a div with the class container:

CSS

.container {
  position: relative;
}

.overlay {
  position: absolute;
  z-index: 1;
}

The container div will be positioned relative to its parent element, while the overlay div will be positioned absolutely. This means that the overlay div will be positioned relative to the container div, and will appear in front of it.

You can also use the top and left properties to position the overlay div relative to the container div. For example, the following CSS code will position the overlay div 100px from the top and 100px from the left of the container div:

CSS

.overlay {
  position: absolute;
  z-index: 1;
  top: 100px;
  left: 100px;
}

forum

How to overlay one div over another div?

Can you answer this question?

1 Answers