Web Development - CSS Position
CSS Position
The position property controls how an element is placed on a web page.
It lets you move, layer, and fix elements anywhere on the screen.
Position Values
The most common position values are:
static- default positioning (normal page flow)relative- positioned relative to its normal placeabsolute- positioned relative to the nearest positioned ancestorfixed- positioned relative to the viewport (does not move when scrolling)sticky- toggles between relative and fixed depending on scroll position
position: static
Static is the default position for all elements. They appear in the normal document flow.
Example
Static positioning:
div.static {
position: static;
border: 2px solid gray;
}
Try it Yourself »
position: relative
A relatively positioned element can be moved from its normal position using top, right, bottom, and left.
Example
Relative positioning:
div.relative {
position: relative;
left: 30px;
border: 2px solid green;
}
Try it Yourself »
This moves the element 30px to the right, but the space it originally occupied remains.
position: absolute
An absolutely positioned element is removed from the normal flow and positioned relative to its first positioned ancestor (not static).
Example
Absolute inside a relative parent:
<div style="position: relative;">
<div style="position: absolute; top: 50px; left: 50px;">
Absolute Box
</div>
</div>
Try it Yourself »
If there's no positioned ancestor, the element is placed relative to the page (the <html> element).
position: fixed
Fixed elements stay in the same place even when the page is scrolled. They are positioned relative to the viewport.
Example
Fixed position (like a sticky header):
div.fixed {
position: fixed;
top: 0;
width: 100%;
background-color: navy;
color: white;
padding: 10px;
}
Try it Yourself »
This is often used for navigation bars that stay at the top of the screen.
position: sticky
Sticky elements behave like relative until a specified scroll position is reached, then they
"stick" like fixed.
Example
Sticky header:
h2 {
position: sticky;
top: 0;
background-color: lightgray;
padding: 5px;
}
Try it Yourself »
Note: You must specify at least one of the top, right, bottom or left properties, for sticky positioning to work.
Note: Sticky positioning works only if the parent has enough height and overflow is visible.
Z-Index (Stack Order)
The z-index property controls the stacking order of positioned elements.
Elements with higher z-index appear in front of others.
Example
Stacking elements:
div.box1 { position: absolute; left: 40px; top: 40px; z-index: 1; }
div.box2 { position: absolute; left: 60px; top: 60px; z-index: 2; }
Try it Yourself »
Best Practices
- Use
relativefor small offsets or containing absolutely positioned children. - Use
absolutefor tooltips, popups, and positioned elements inside containers. - Use
fixedfor sticky navigation or floating buttons. - Use
stickyfor headers that stay visible during scroll. - Control stacking with
z-index.
Next, you'll learn about CSS Float and Clear - how to align elements side by side before we move on to Flexbox and Grid layouts.
