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%);
  z-index: 1;
}

What this does

• .wrapper becomes the positioning reference
• .navi is the main block
• #infoi is placed on top of the wrapper
• right: 0 moves it to the far right
• top: 50% places its top edge halfway down
• transform: translateY(-50%) pulls it up by half its own height so it becomes vertically centered

If you cannot add a wrapper

If both elements are completely independent in the layout, true overlaying becomes harder because absolute positioning needs a reference. In practice, developers usually add a shared parent:

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

This does not nest #infoi inside .navi; it only places both inside a common container.

Alternative using negative margins

This approach is less flexible, but you may see it in older code:

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

#infoi {
  margin-top: -40px;
  margin-left: 260px;
}

This can visually overlap the element, but it is harder to maintain and breaks more easily when sizes change.

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.
2. Because .wrapper has position: relative, it becomes the reference box for absolutely positioned children.
3. .navi is drawn inside the wrapper with a height of 50px.
4. #infoi has position: absolute, so it is removed from normal document flow.
5. right: 0 places its right edge against the wrapper's right edge.
6. top: 50% places the top of #infoi halfway down the wrapper.
7. transform: translateY(-50%) shifts it upward by half of its own height.
8. The result is an element that appears on top of .navi, on the right side, vertically centered.

Without position: relative on .wrapper, the browser would likely position #infoi relative to the page or another ancestor, not the navigation box.

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.

Common pattern: z-index for layering

If another element covers your overlay, use z-index.

#infoi {
  position: absolute;
  z-index: 10;
}

Common pattern: utility classes

In larger codebases, teams often create reusable classes for overlays instead of writing one-off CSS each time.

.relative {
  position: relative;
}

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

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: 50%;
}

This places the top edge of the overlay at the middle, not the center of the overlay itself.

Fix:

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

4. Ignoring stacking order

Sometimes the overlay is in the right place but appears behind another element.

Fix:

#infoi {
  position: absolute;
  z-index: 2;
}

5. Not giving the base element a known size

If .navi has no visible height or width, it may be hard to position the overlay meaningfully.

.navi {
  height: 60px;
}

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

CSS Grid can also overlap elements by placing them in the same grid cell, but for a simple icon over a bar, absolute positioning is usually easier for beginners.

/* 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"></div>
  <div class="overlay"></div>
</div>

Edge cases

• No positioned parent: overlay may attach to the page instead
• No height on the base element: alignment may not look correct
• Overflow hidden on a parent: overlay may get clipped

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