How to Overlay One div Over Another in CSS

By the end of this page, you will understand how CSS positioning lets one element appear on top of another, even when the elements are separate siblings in the HTML. You will learn how position: relative and position: absolute work together, how stacking order affects overlays, and how to align an element to the right and vertically center it over another element.

CSS overlaying is usually done with positioning. The most common pattern is:

• Give one element a positioning context with position: relative
• Place another element using position: absolute
• Use top, right, left, or bottom to control where it appears
• Use z-index if needed to ensure it appears above the other element

An important detail is that absolute positioning is relative to the nearest positioned ancestor. If no ancestor has a position like relative, absolute, or fixed, the element may be positioned relative to the page instead.

In real programming, overlays are used everywhere:

• icons on top of cards
• notification badges
• floating buttons
• labels over images
• tooltips and status markers

In your case, the challenge is that the two div elements are siblings, not nested. That means you usually need a shared parent container or another layout strategy so the overlay can be positioned in relation to the first element.

If the elements truly must remain separate siblings, wrapping both in a container is still valid because they remain separate elements; they are just grouped so CSS can position one relative to the other.

Think of CSS positioning like placing sticky notes on a board.

• A normal div sits in the regular flow, like a paper placed in order on a desk.
• A position: relative element becomes a reference board.
• A position: absolute element is like a sticky note placed at a precise spot on that board.

If you do not give the board a reference frame, the sticky note may end up attached relative to the whole wall instead of the card you wanted.

So the usual overlay pattern is:

• create a local reference area
• place the base element there
• place the overlay on top of it using exact coordinates

Basic overlay pattern

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi">
    <img src="info_icon2.png" height="20" width="32" alt="Info icon" />
  </div>
</div>

.wrapper {
  position: relative;
  width: 300px;
}

.navi {
  height: 60px;
  background: #4a90e2;
}

#infoi {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  : ;
}

Consider this example:

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi">i</div>
</div>

.wrapper {
  position: relative;
  width: 200px;
}

.navi {
  height: 50px;
  background: gray;
}

#infoi {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: orange;
  padding: 4px 8px;
}

Step by step

1. The browser creates .wrapper as a normal block.

Overlay positioning is common in many UI patterns:

• Info icons on navigation bars: place an icon on the right side of a header or menu bar
• Notification badges: show a small count badge on top of an icon
• Edit buttons on cards: float an action button over a content card
• Status labels on images: show tags like New, Live, or Sold Out
• Play buttons on thumbnails: place a button at the center of a video preview
• Close buttons on modals: align an X button at the top-right corner

In all of these cases, one element visually sits on top of another, but the HTML structure may still keep them as separate elements for styling, scripting, or accessibility reasons.

In real projects, developers usually avoid fragile positioning tricks and prefer predictable patterns.

Common pattern: shared wrapper

A shared parent container is the standard approach:

<div class="card">
  <img src="photo.jpg" alt="Profile" />
  <button class="edit-btn">Edit</button>
</div>

.card {
  position: relative;
}

.edit-btn {
  position: absolute;
  top: 8px;
  right: 8px;
}

Common pattern: guard against overlap issues

Developers often set explicit sizes or padding on the base element so the overlay does not hide important content.

.navi {
  height: 60px;
  padding-right: 40px;
}

That extra padding reserves visual room near the right edge.

1. Forgetting the positioned parent

Broken example:

#infoi {
  position: absolute;
  right: 0;
  top: 50%;
}

If no parent has position: relative, this may position the element relative to the page.

Fix:

.wrapper {
  position: relative;
}

2. Trying to overlay with only margins

Broken example:

#infoi {
  margin-left: 300px;
  margin-top: -20px;
}

This may appear correct at one size but break when the layout changes.

Use absolute positioning instead.

3. Forgetting transform: translateY(-50%)

Broken example:

#infoi {
  position: absolute;
  right: 0;
  top: ;
}

Absolute positioning vs Flexbox

• Absolute positioning is for placing one element on top of another
• Flexbox is mainly for arranging elements in a row or column

Absolute positioning vs Grid layering

/* Standard overlay setup */
.parent {
  position: relative;
}

.child-overlay {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

Rules to remember

• position: absolute positions an element relative to the nearest positioned ancestor
• Add position: relative to the parent you want to use as the reference
• Use right: 0 for right alignment
• Use top: 50% plus transform: translateY(-50%) for vertical centering
• Use z-index if the overlay appears behind something else

Common overlay pattern

<div class="wrapper">
  <div class="base"></>
  

Can I overlay one div over another without nesting it inside the first div?

Yes. Both elements can remain separate siblings, but they usually need a shared parent container for reliable positioning.

Why does my absolutely positioned div move relative to the page?

Because it does not have a positioned ancestor. Add position: relative to the container you want it to align with.

How do I center an overlay vertically?

Use:

top: 50%;
transform: translateY(-50%);

How do I place the overlay at the far right?

Use:

right: 0;

Why is my overlay behind the other div?

Add a z-index value to the overlay and make sure it is positioned.

Can Flexbox overlay elements?

Not by itself in the same way. Flexbox is mainly for layout, not true stacking. For overlays, absolute positioning is usually the better tool.

• CSS positioning — the foundation for placing elements precisely
• position: relative — creates the reference area for absolutely positioned children
• position: absolute — removes an element from normal flow and places it by coordinates
• z-index — controls which overlapping element appears on top
• Flexbox — useful for alignment, but not usually for true overlays
• CSS Grid — can also layer elements in the same space
• Box model — helps you understand how size, padding, and borders affect positioning
• Stacking context — explains why some elements appear above or below others