[ CSS position property](#)
* * *
`position: absolute` is one of the most powerful values in CSS positioning.
**Absolute positioning** removes elements from the **normal document flow**, no longer occupying space, and then precisely positions them relative to their **nearest positioned ancestor element**.
This is the core technology for creating UI components like popups, dropdown menus, and floating cards.
**Word meaning**: `absolute` comes from Latin `absolutus`, meaning "absolute, unconditional", indicating that the position is completely independent of the document flow.
* * *
## Basic Syntax
`position: absolute` needs to be used with `top`, `right`, `bottom`, and `left` properties to specify the position.
/* Syntax */ position: absolute;/* Common combinations */.box { position: absolute; top: 0; /* Align to top */ left: 0; /* Align to left */ /* Or */ top: 50%; /* Start from center */ left: 50%; transform: translate(-50%, -50%); /* Perfectly centered */}
## Positioning Principle
The key to understanding `absolute` positioning is the concept of **positioning context**:
### Positioning Context
Absolutely positioned elements **search upward layer by layer** to find the first **non-static positioned** ancestor element as reference. If no such ancestor is found, positioning is relative to the **initial containing block** (usually the page).
### Search Process
┌─────────────────────────────────────┐│ Initial containing block (body or html) ││ ┌─────────────────────────────┐ ││ │ parent (position: relative) │ ← Found! Used as reference ││ │ ┌─────────────────────┐ │ ││ │ │ child (absolute) │ │ ││ │ │ top: 0, left: 0 │ │ ││ │ └─────────────────────┘ │ ││ └─────────────────────────────┘ │└─────────────────────────────────────┘
* * *
## Core Features
### Feature 1: Remove from Document Flow
`absolute` elements **do not occupy document space**, surrounding elements ignore their existence and arrange normally. It's as if the element "floats" above the document.
### Feature 2: Position Relative to Positioned Ancestor
"Positioned" means the `position` value is not `static` (can be `relative`, `absolute`, `fixed`, or `sticky`).
### Feature 3: Activates z-index
Like `relative`, `absolute` activates the `z-index` property.
### Feature 4: Margins Do Not Collapse
Unlike normal document flow, `absolute` element margins do not collapse with adjacent element margins.
* * *
## Examples
Let's deeply understand how `position: absolute` works through examples.
### Example 1: Most Basic Absolute Positioning
This example shows how an element positions relative to its parent container:
## Example
/* Parent container needs non-static positioning to serve as reference */
.container {
position: relative; /* Key: serves as positioning reference */
width: 300px;
height: 200px;
background-color: #f5f5f5;
border: 2px solid #3498db;
}
/* Absolutely positioned element */
.absolute-box {
position: absolute;
top: 20px;
right: 20px;
width: 80px;
height: 40px;
background-color: #e74c3c;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
Parent container (position: relative)
Absolute positioning
The red box is positioned relative to the top-right corner of the parent container (rather than the page).
### Example 2: No Positioned Ancestor
If the parent element has no positioning set, the element keeps searching upward and eventually positions relative to the page:
## Example
/* Note: no position: relative set here */
.container-no-position {
width: 300px;
height: 150px;
background-color: #f0f0f0;
border: 2px solid #ccc;
padding: 20px;
}
/* Since parent has no positioning, positions relative to page */
.floating-box {
position: absolute;
top: 10px;
left: 10px;
background-color: #2ecc71;
color: white;
padding: 10px 20px;
border-radius: 4px;
}
Parent container (unpositioned)
<div class="floating-box
YouTip