Absolute positioning inside absolute position

html

responsive-design

positioning

best-practices

byAnton Shumikhin·Sep 13, 2024

Apply position: absolute to a child to anchor it inside an absolute parent. The child's top, right, bottom, and left properties act as offset coordinates from the parent's boundaries.

<div style="position: absolute; top: 50px; left: 100px;">
  <div style="position: absolute; top: 10px; left: 20px;">
    <!-- This position is 10px top and 20px left relative to the parent -->
  </div>
</div>

The inner div here is tucked in 10px from top and 20px from left of its parent's origin.

The concept of containing block

In positioning, the principle of the closest positioned ancestor is a crucial rule to remember. An absolutely positioned element searches for its closest ancestor, that is also positioned, to use as its reference point for placement.

<div style="position: absolute; top: 0; left: 0;">
  <!-- Acts as the containing block for its descendents -->
  <div style="position: static;">
    <!-- When set to static, doesn't affect the absolute child -->
    <div style="position: absolute; top: 30px; left: 40px;">
      <!-- This div takes the first div as its positioning reference -->
    </div>
  </div>
</div>

HTML structure significance

The arrangement of your HTML plays a huge part in positioning elements. If you need the third div to answer the first div's "absolute" call, you might need to refactor your HTML:

Make the third div a direct child of the first.
Set the second div to position: static or omit position entirely.

How to reset relative positioning

For setting up a relative position context within an absolute context, here's how you can reset the stage with position: relative:

<div style="position: relative;">
  <div style="position: absolute; top: 0; left: 0;">
    <!-- First div positioned absolutely, wrapped snugly in a relative blanket -->
    <div style="position: absolute; top: 30px; left: 40px;">
      <!-- This div is absolutely positioned within the first div -->
    </div>
  </div>
</div>

Beware of these positioning quirks

Be careful about these potentially tricky issues: redundant nesting and z-index stacking order. Unnecessary nesting can lead to a confusing layout, and positioning behavior can get weird when z-index crashes the party.

Mixed positioning for complex layouts

Harness the power of absolute positioning to implement intricate UI designs. Here are a few practical scenarios:

Overlay content by setting a modal to an absolute position within a relative container that spans the viewport.
Craft custom dropdown menus where the list items are absolutely positioned within the relative parent.

How to cope with changing content

Remember that absolute positioning plucks elements out of the page flow. This can be handy but also complex to maintain, especially with dynamic content: