Question
I need to place one div on top of another div.
My HTML looks like this:
<div class="navi"></div>
<div id="infoi">
<img src="info_icon2.png" height="20" width="32" alt="Info icon" />
</div>
I cannot place #infoi or the img inside .navi, so they must remain as two separate sibling div elements.
How can I position #infoi so that it appears over .navi, aligned to the far right side, and vertically centered relative to .navi?
Short Answer
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.
Concept
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, orbottomto control where it appears - Use
z-indexif 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.
Mental Model
Think of CSS positioning like placing sticky notes on a board.
- A normal
divsits in the regular flow, like a paper placed in order on a desk. - A
position: relativeelement becomes a reference board. - A
position: absoluteelement 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
Syntax and Examples
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%);
: ;
}
Step by Step Execution
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
- The browser creates
.wrapperas a normal block.
Real World Use Cases
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, orSold Out - Play buttons on thumbnails: place a button at the center of a video preview
- Close buttons on modals: align an
Xbutton 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.
Real Codebase Usage
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 Mistakes
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: ;
}
Comparisons
| Technique | Best for | Pros | Cons |
|---|---|---|---|
position: absolute inside a position: relative parent | True overlays | Precise and reliable | Needs a positioned parent |
| Negative margins | Small visual adjustments | Quick for simple cases | Fragile and hard to maintain |
| Flexbox | Aligning items side by side | Great for layout | Not for true overlap by itself |
| CSS Grid | Layering items in same grid area | Powerful and modern | Slightly more advanced |
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
Cheat Sheet
/* Standard overlay setup */
.parent {
position: relative;
}
.child-overlay {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
Rules to remember
position: absolutepositions an element relative to the nearest positioned ancestor- Add
position: relativeto the parent you want to use as the reference - Use
right: 0for right alignment - Use
top: 50%plustransform: translateY(-50%)for vertical centering - Use
z-indexif the overlay appears behind something else
Common overlay pattern
<div class="wrapper">
<div class="base"></>
FAQ
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.
Mini Project
Description
Build a small notification bar with an info icon overlaid on its right side. This project demonstrates the most common overlay pattern: a base element with a separate sibling overlay positioned using a shared parent container.
Goal
Create a horizontal navigation bar and place an info icon on top of it at the far right, vertically centered.
Requirements
- Create a parent container that holds both the navigation bar and the info icon
- Keep the navigation bar and icon in separate elements
- Position the icon at the right edge of the bar
- Vertically center the icon relative to the bar
- Make sure the icon appears above the bar visually
Keep learning
Related questions
CSS Font Scaling Relative to Container Size: %, em, rem, vw, and Responsive Text
Learn how CSS font scaling really works and how to make text responsive using %, em, rem, vw, clamp(), and media queries.
CSS Parent Selector Explained: Selecting a Parent <li> from an <a>
Learn whether CSS has a parent selector, how :has() works, and practical alternatives for styling a parent li from a child anchor.
CSS Previous Sibling Selector: What Exists and How to Work Around It
Learn whether CSS has a previous sibling selector, why it does not, and practical ways to style earlier elements using CSS alternatives.