Bird
Raised Fist0
CSSmarkup~5 mins

Position absolute in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Position absolute lets you place an element exactly where you want on the page. It helps you move things freely without affecting other parts.

You want to put a button at the bottom right corner of a box.
You need to place a label over an image.
You want a popup message to appear on top of other content.
You want to create a custom tooltip near a word.
You want to layer elements on top of each other.
Syntax
CSS
selector {
  position: absolute;
  top: value;
  right: value;
  bottom: value;
  left: value;
}

Use top, right, bottom, and left to move the element from the edges.

The element moves relative to the nearest parent that has position set to relative, absolute, or fixed. If none, it moves relative to the page.

Examples
This places the div 10 pixels from the top and 20 pixels from the left of its positioned parent or page.
CSS
div {
  position: absolute;
  top: 10px;
  left: 20px;
}
This places the button at the bottom right corner of its positioned parent.
CSS
button {
  position: absolute;
  bottom: 0;
  right: 0;
}
This centers the span exactly in the middle of its positioned parent.
CSS
span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Sample Program

This example shows a blue container box with a smaller dark blue box placed at the top right corner using position: absolute. The container has position: relative so the small box moves relative to it.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Position Absolute Example</title>
  <style>
    .container {
      position: relative;
      width: 300px;
      height: 200px;
      background-color: #cce5ff;
      border: 2px solid #004085;
      margin: 2rem auto;
      padding: 1rem;
      font-family: Arial, sans-serif;
    }
    .box {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: #004085;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <main>
    <section class="container" aria-label="Blue container with absolute positioned box">
      This is a container box.
      <div class="box" role="note">Top Right</div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always set position: relative on the parent container to control where the absolute element moves.

Absolute elements are removed from the normal page flow, so they don't take up space and can overlap other content.

Use keyboard and screen reader friendly roles and labels when placing important content absolutely.

Summary

Position absolute lets you place elements exactly where you want inside a container.

It moves relative to the nearest positioned parent or the page if none.

Use top, right, bottom, and left to control the exact spot.

Practice

(1/5)
1. What does position: absolute; do to an element in CSS?
easy
A. It makes the element stay in the normal page flow.
B. It places the element exactly where you want inside its nearest positioned ancestor.
C. It hides the element from the page.
D. It makes the element fixed to the browser window.

Solution

  1. Step 1: Understand position absolute behavior

    Position absolute removes the element from normal flow and places it relative to the nearest positioned ancestor.

  2. Step 2: Compare with other position types

    Unlike static or fixed, absolute positions relative to a parent with position set, not the viewport or normal flow.

  3. Final Answer:

    It places the element exactly where you want inside its nearest positioned ancestor. -> Option B

  4. Quick Check:

    Position absolute = relative to nearest positioned parent [OK]
Hint: Absolute means position relative to nearest positioned parent [OK]
Common Mistakes:
  • Thinking absolute keeps element in normal flow
  • Confusing absolute with fixed position
  • Assuming absolute always positions relative to viewport
2. Which CSS snippet correctly positions an element 20px from the top and 30px from the left using absolute positioning?
easy
A. position: fixed; top: 20px; left: 30px;
B. position: relative; top: 20px; left: 30px;
C. position: absolute; top: 20px; left: 30px;
D. position: static; top: 20px; left: 30px;

Solution

  1. Step 1: Identify correct position property

    Only position: absolute; allows exact placement with top and left.

  2. Step 2: Check the offset properties

    Using top: 20px; and left: 30px; moves the element 20px down and 30px right from its positioned ancestor.

  3. Final Answer:

    position: absolute; top: 20px; left: 30px; -> Option C

  4. Quick Check:

    Absolute + top/left = exact position [OK]
Hint: Use position absolute with top and left for exact placement [OK]
Common Mistakes:
  • Using position relative instead of absolute
  • Using position static which ignores top/left
  • Confusing fixed with absolute positioning
3. Given this HTML and CSS, where will the red box appear?
<div class='container'>
  <div class='box'>Red Box</div>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
  background: lightgray;
}
.box {
  position: absolute;
  top: 50px;
  right: 20px;
  width: 100px;
  height: 50px;
  background: red;
  color: white;
}
medium
A. Inside the container, 50px from top and 20px from right edge
B. At the top-left corner of the page
C. Centered inside the container
D. Outside the container, 50px from top and 20px from right edge

Solution

  1. Step 1: Identify container positioning

    The container has position: relative;, so it becomes the reference for absolute children.

  2. Step 2: Locate the box using top and right

    The box is positioned 50px from the top and 20px from the right inside the container.

  3. Final Answer:

    Inside the container, 50px from top and 20px from right edge -> Option A

  4. Quick Check:

    Absolute inside relative = positioned inside container [OK]
Hint: Absolute inside relative positions relative to container [OK]
Common Mistakes:
  • Thinking absolute positions relative to page if parent is relative
  • Ignoring right property and assuming left positioning
  • Assuming box is centered without explicit centering
4. Why does this absolutely positioned element not move 10px from the top as expected?
.child {
  position: absolute;
  top: 10px;
}
.parent {
  width: 300px;
  height: 300px;
  background: blue;
}

The HTML is:
<div class='parent'>
  <div class='child'>Hello</div>
</div>
medium
A. Because the child element must have position: relative instead
B. Because top: 10px is invalid without left or right
C. Because absolute positioning requires display: block on parent
D. Because the parent has no position set, so child positions relative to the page

Solution

  1. Step 1: Check parent positioning

    The parent has no position set, so it defaults to static, which does not create a positioning context.

  2. Step 2: Understand absolute positioning reference

    The child with position absolute will position relative to the nearest positioned ancestor or the page if none exists.

  3. Final Answer:

    Because the parent has no position set, so child positions relative to the page -> Option D

  4. Quick Check:

    Absolute needs positioned parent to position inside it [OK]
Hint: Set parent position to relative for absolute child positioning [OK]
Common Mistakes:
  • Assuming absolute always positions inside parent
  • Thinking top needs left or right to work
  • Believing display property affects absolute positioning
5. You want to place a tooltip box exactly 10px above a button inside a container. The container has position: relative;. Which CSS for the tooltip ensures it appears above the button using absolute positioning?
.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: black;
  color: white;
  padding: 5px;
  border-radius: 3px;
}
hard
A. This CSS places the tooltip 10px above the button, centered horizontally.
B. This CSS places the tooltip below the button, offset by 10px.
C. This CSS places the tooltip inside the button, overlapping text.
D. This CSS ignores the container's position and places tooltip at page top.

Solution

  1. Step 1: Understand bottom: 100% usage

    Setting bottom: 100% places the tooltip exactly at the top edge of the button.

  2. Step 2: Apply transform for offset and centering

    translateX(-50%) centers horizontally, and translateY(-10px) moves it 10px further up.

  3. Final Answer:

    This CSS places the tooltip 10px above the button, centered horizontally. -> Option A

  4. Quick Check:

    bottom 100% + translateY(-10px) = 10px above [OK]
Hint: Use bottom 100% plus translateY(-10px) to move above element [OK]
Common Mistakes:
  • Using top instead of bottom for positioning above
  • Not centering with translateX(-50%)
  • Forgetting container must be relative