Unlocking Layout Control with Five Key Properties
CSS positioning is your toolkit for taking elements out of the standard document flow and placing them exactly where you want them. Think of the standard flow like a river – elements just follow the current. Positioning lets you build dams, divert channels, or even make elements float above the water!
There are five main values for the position property:
static (The Default)relativeabsolutefixedstickyThis is the default behavior for every HTML element. Elements with position: static; are rendered in the normal flow of the document. They stack one after another, just like words on a page.
Crucially, you cannot use the top, right, bottom, or left properties to move a statically positioned element. Those properties only work with other position values.
.my-element {
position: static; /* This is the default, often omitted */
/* top, right, bottom, left will have NO effect */
}
An element with position: relative; is positioned relative to its normal position in the document flow. You can use top, right, bottom, and left to nudge it away from where it would normally sit.
Important: The space that the element *would* have occupied in the normal flow is still reserved. Other elements do not move to fill the gap left by a relatively positioned element.
.my-element {
position: relative;
top: 32px; /* Move 32px down from its normal top edge */
left: 32px; /* Move 32px right from its normal left edge */
}
An element with position: absolute; is removed entirely from the normal document flow. It's positioned relative to its nearest positioned ancestor (an ancestor with a position other than static).
If there is no positioned ancestor, it's positioned relative to the initial containing block (usually the viewport or the <html> element).
Since it's out of the flow, other elements will behave as if the absolute element doesn't exist in terms of layout space.
/* On the PARENT element */
.parent-container {
position: relative; /* Or absolute, fixed, sticky */
}
/* On the CHILD element */
.my-element {
position: absolute;
bottom: 32px; /* Position 32px from the bottom edge of the parent */
right: 32px; /* Position 32px from the right edge of the parent */
}
An element with position: fixed; is positioned relative to the viewport. It stays in the same place even if the user scrolls the page.
Like absolute positioning, fixed elements are removed from the normal document flow.
Scroll this section to see the fixed box.
Note: The fixed box above is fixed relative to the *viewport*, not the dashed container.
.my-element {
position: fixed;
top: 20px; /* Position 20px from the top edge of the viewport */
left: 20px; /* Position 20px from the left edge of the viewport */
}
An element with position: sticky; is positioned based on the user's scroll position. It behaves like position: relative; until a certain scroll offset is met, at which point it becomes fixed relative to its containing block.
You need to specify at least one of top, right, bottom, or left for sticky positioning to work. This value determines the offset from the viewport edge where the element becomes "stuck".
Note: The sticky box above is sticky relative to the dashed container's scroll.
.my-element {
position: sticky;
top: 16px; /* Element becomes fixed when its top edge is 16px from the viewport top */
}
Experiment with different position types and offsets. See how the blue box behaves relative to the dashed container and the grey reference box.
Note: Dragging is enabled for 'relative' and 'absolute' positions within the container.