Answers by Sentry

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>

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;
}

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.

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

Try Sentry For FreeRequest a Demo
    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.