Overlay One Div Over Another Div with CSS Positioning

You will learn how CSS overlays work with position: relative and position: absolute. You will also see why sibling elements need a shared positioning context, how to center an overlay vertically, and how to keep it aligned to the right edge of a navigation area.

An overlay is an element that is visually placed on top of another element. In CSS, this is commonly done with positioning.

• position: relative creates a positioning context without removing an element from normal page layout.
• position: absolute removes an element from normal layout and lets you place it using top, right, bottom, and left.
• An absolutely positioned element is positioned relative to its nearest ancestor that has a position other than static.

Because .navi and #infoi are siblings, .navi cannot directly act as the positioning context for #infoi. The usual solution is to give both elements a shared parent, such as .nav-wrapper.

This keeps the elements separate in the HTML while allowing the icon to stay attached to the navigation bar as the page changes size.

Think of .nav-wrapper as a picture frame.

• .navi is the background picture inside the frame.
• #infoi is a small sticker placed over that picture.
• The wrapper is the frame that tells the sticker where its edges are.

With right: 0, the sticker is placed against the frame's right edge. With top: 50% and transform: translateY(-50%), the sticker moves to the vertical middle of the frame.

Use a shared wrapper with position: relative, then absolutely position the overlay inside that wrapper.

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

.nav-wrapper {
  position: relative;
  height: 60px;
}

.navi {
  height: 100%;
  background-color: #1f4f7a;
}

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

#infoi img {
  display: block;
}

How it works:

• .nav-wrapper is the reference area for the overlay.
• .navi fills the wrapper and provides the visible navigation background.
• #infoi is removed from normal document flow with position: absolute.
• right: 12px places the icon 12 pixels from the right edge.
• top: 50% starts the icon at the wrapper's vertical midpoint.
• translateY(-50%) moves the icon upward by half of its own height, producing true vertical centering.

The two target elements remain separate sibling elements.

Consider this example:

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

.nav-wrapper {
  position: relative;
  height: 50px;
}

.navi {
  height: 50px;
  padding: 0 16px;
  line-height: 50px;
  background: steelblue;
  color: white;
}

#infoi {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  color: steelblue;
  text-align: center;
  line-height: 24px;
}

Step by step:

1. The wrapper takes up a 50-pixel-high area.
2. .navi is drawn normally inside that area as the blue bar.
3. #infoi uses position: absolute, so it no longer takes up layout space below the bar.
4. The browser finds .nav-wrapper as the closest positioned ancestor.
5. right: 10px places the icon near the wrapper's right edge.
6. top: 50% places the icon's top edge halfway down the wrapper.
7. translateY(-50%) shifts the icon up by 12 pixels, which centers its 24-pixel height vertically.
8. Since it is positioned independently, the icon is painted over the navigation bar.

CSS overlays are useful whenever a small control, label, or indicator belongs visually on top of another interface element.

• Navigation bars: help, profile, notification, or settings icons at an edge.
• Image galleries: previous/next buttons over a photo.
• Cards: a favorite button or status badge over a product image.
• Video players: a play button centered over a video thumbnail.
• Forms: a show-password button inside a password field area.
• Dashboards: unread-count badges over notification icons.

In each case, a positioned parent gives the overlay a stable local coordinate system.

In real projects, developers usually avoid positioning an overlay relative to the page itself. Instead, they create a component container and position overlay controls inside it.

A common component pattern is:

<div class="card">
  <img class="card__image" src="product.jpg" alt="Product">
  <button class="card__favorite" type="button" aria-label="Save product">♥</button>
</div>

.card {
  position: relative;
}

.card__favorite {
  position: absolute;
  top: 12px;
  right: 12px;
}

Useful project practices include:

• Give the component root position: relative.
• Use a <button> for clickable icons instead of a plain <div>.
• Add an aria-label when an icon has no visible text.
• Use spacing tokens or CSS custom properties instead of scattered magic numbers.
• Add z-index only when another positioned element covers the overlay.

For example, if the icon should always sit above a decorative layer:

#infoi {
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 1;
  transform: translateY(-50%);
}

Positioning relative to the wrong element

This CSS does not make #infoi position itself relative to .navi, because they are siblings:

.navi {
  position: relative;
}

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

#infoi will search upward through its own ancestors, not sideways to its sibling. Put both elements inside a positioned wrapper instead.

Forgetting position: relative on the wrapper

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

Without a positioned ancestor, the overlay may be placed relative to the page or another ancestor. Add position: relative to .nav-wrapper.

Using top: 50% without translating

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

This aligns the top edge of the overlay to the midpoint. For vertical centering, add:

transform: translateY(-50%);

Assuming z-index always fixes overlays

z-index controls stacking order, not position. First use the correct positioning context. Add z-index only if elements overlap in the wrong order.

Hiding useful image text

Avoid an empty alt attribute when the image communicates an action or meaning. Use meaningful alternative text, such as alt="Information". If the image is purely decorative, use alt="".

Letting the overlay cover navigation content

If the navigation contains text or links, reserve enough space on the right so they do not sit underneath the icon:

.navi {
  padding-right: 56px;
}

Absolute positioning versus Grid overlap

CSS Grid can also overlay sibling elements when they share a parent:

.nav-wrapper {
  display: grid;
}

.navi,
#infoi {
  grid-area: 1 / 1;
}

#infoi {
  justify-self: end;
  align-self: center;
  margin-right: 12px;
}

Grid is useful when the parent is already a grid layout. For a single icon overlay, relative and absolute positioning is usually easier to read.

/* Parent: defines the local positioning area */
.parent {
  position: relative;
}

/* Overlay: positioned over the parent */
.overlay {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

• position: relative: keeps an element in normal layout and creates a reference for positioned descendants.
• position: absolute: removes an element from normal layout and enables offset properties.
• top, right, bottom, left: set offsets from the containing block.
• top: 50% + translateY(-50%): vertically centers an element.
• left: 50% + translate(-50%, -50%): centers an element both horizontally and vertically.
• z-index: controls front-to-back order when positioned elements overlap.
• Sibling overlays need a common positioned parent.
• Use padding-right on underlying content when an overlay could cover it.

Can I overlay two sibling divs without putting one inside the other?

Yes. Put both sibling elements inside a shared wrapper. Give the wrapper position: relative and the overlay position: absolute.

Why is my absolutely positioned div appearing in the corner of the page?

It probably has no positioned ancestor. Add position: relative to the wrapper that should define its boundaries.

Does position: absolute remove an element from layout?

Yes. Other normal-flow elements behave as though the absolutely positioned element does not take up space.

How do I align an overlay to the right side?

Use right: 0 to touch the edge, or use a value such as right: 12px to add inner spacing.

How do I center an overlay vertically in a div?

Use top: 50% and transform: translateY(-50%) on the overlay.

Do I always need z-index for an overlay?

No. Positioned elements often appear correctly without it. Add a z-index only when another element is covering the overlay.

Can I make the icon clickable?

Yes. Prefer a <button> for an action, or an <a> element for navigation. This provides better keyboard and accessibility support.

Can I use CSS Grid instead of absolute positioning?

Yes. Grid can overlap sibling elements in the same grid cell. It is especially useful when the surrounding component already uses Grid.

• CSS positioning — The foundation for using relative, absolute, fixed, and sticky placement.
• CSS containing blocks — Explains which ancestor an absolutely positioned element uses for its coordinates.
• CSS z-index and stacking contexts — Controls which overlapping element appears in front.
• CSS transforms — Enables accurate centering with translateX() and translateY().
• CSS Grid — Offers an alternative way for sibling elements to overlap.
• Flexbox alignment — Useful for ordinary horizontal and vertical alignment when no overlay is needed.
• Accessible buttons and images — Helps make icon controls usable with keyboards and screen readers.