Sentry Answers>CSS>

How do I overlay one div over another div?

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:

Click to Copy
<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:

Click to Copy
.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.

  • Syntax.fmHasty Treat - CSS Grid Masonry (Grid Level 3)
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fmHasty Treat - CSS Grid Level 2 aka Subgrid
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,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
© 2024 • Sentry is a registered Trademark of Functional Software, Inc.