Absolute Position

Absolute Position

position: absolute completely removes an element from the normal document flow and lets you place it at exact coordinates relative to its nearest positioned ancestor.

Basic Syntax

.element {
    position: absolute;
    top: 0;
    right: 0;
}

How Absolute Positioning Works

1. The element is removed from normal flow — other elements ignore it
2. It doesn't take up any space — other content fills the gap
3. It positions itself relative to the nearest positioned ancestor
4. If no positioned ancestor exists, it positions relative to the viewport (HTML element)

What Is a "Positioned Ancestor"?

Any ancestor with a position value other than static:

/* These all create a positioning context: */
position: relative;  /* Most common choice */
position: absolute;
position: fixed;
position: sticky;

The Parent-Child Pattern

<div class="card">
    <img src="product.jpg" alt="Product">
    <span class="badge">Sale!</span>
</div>

.card {
    position: relative;  /* The positioning context */
    width: 300px;
}

.badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e74c3c;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

/* Result:
┌──────────────────────────┐
│                    [Sale!]│  ← badge positioned at top-right
│                          │
│      Product Image       │
│                          │
└──────────────────────────┘ */

Positioning Coordinates

Property	Measures From
top: 10px	10px from the top edge of the positioned ancestor
bottom: 10px	10px from the bottom edge
left: 10px	10px from the left edge
right: 10px	10px from the right edge

Center an Absolute Element

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* top: 50% moves the TOP edge to the center.
   transform: translate(-50%, -50%) shifts it back
   by half its own width and height → perfectly centered. */

Stretch to Fill Parent

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* This fills the entire parent!
       Setting all four to 0 stretches the element 
       to match the parent's dimensions. */
    background: rgba(0, 0, 0, 0.5);
}

/* Shorthand using inset: */
.overlay {
    position: absolute;
    inset: 0;  /* Same as top:0; right:0; bottom:0; left:0; */
}

Common Absolute Positioning Patterns

Close Button (Top Right)

.modal { position: relative; }
.close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
}

Notification Badge

.icon-wrapper { position: relative; display: inline-block; }
.notification-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: #e74c3c;
    border-radius: 50%;
}

Image Caption Overlay

.image-container { position: relative; }
.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    padding: 20px;
}

Key Takeaways

• position: absolute removes the element from flow — it doesn't take up space
• It positions relative to the nearest ancestor with position: relative (or other non-static)
• Always set position: relative on the parent you want to position within
• Use top: 50%; left: 50%; transform: translate(-50%, -50%) for perfect centering
• Use inset: 0 to stretch an absolute element to fill its parent
• Common uses: badges, overlays, close buttons, tooltips