The CSS Position Property
The position property specifies the type of positioning method used for an element. There are five different position values: static, relative, fixed, absolute, and sticky.
Key Concepts
- 1 Elements are positioned using top, bottom, left, and right properties
- 2 These properties work differently depending on position value
- 3 Positioned elements create stacking contexts
When to Use
- 1 Creating complex layouts beyond normal document flow
- 2 Positioning elements relative to their container
- 3 Implementing fixed headers or sticky elements
Position Values Explained
1. Static (Default)
Elements render in order, as they appear in the document flow. The top, right, bottom, and left properties have no effect.
position: static;
}
Note: This is the default value. Elements are positioned according to the normal flow of the document.
2. Relative
The element is positioned relative to its normal position. Other content will not be adjusted to fit into any gap left by the element.
position: relative;
top: 20px;
left: 20px;
}
Tip: Often used as a container for absolutely positioned elements.
3. Absolute
The element is removed from the normal document flow and positioned relative to its nearest positioned ancestor (if any) or the initial containing block.
position: relative;
}
.element {
position: absolute;
top: 25%;
left: 25%;
}
Use Case: Perfect for tooltips, modals, and custom dropdown menus.
4. Fixed
The element is removed from the normal document flow and positioned relative to the viewport. It stays in the same place even when the page is scrolled.
position: fixed;
bottom: 20px;
right: 20px;
z-index: 10;
}
Common Uses: Navigation bars, chat widgets, and "back to top" buttons.
5. Sticky
The element is positioned based on the user's scroll position. It toggles between relative and fixed, depending on scroll position.
Scroll down to see sticky behavior...
Continue scrolling...
More content here...
position: sticky;
top: 0;
}
Modern Use: Great for table headers, section headers, and sticky navigation.
Positioning Playground
Try It Yourself
Adjust the controls to see how different position values affect the element:
Real-World Examples
Dropdown Menu
<div class="relative">
<button>Open Menu</button>
<div class="absolute left-0 mt-2">
<a href="#">Profile</a>
<!-- More items -->
</div>
</div>
Modal Window
Modal Title
This is a modal window positioned with fixed.
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}