position: static;
Static is the default position for all elements. The element follows the normal document flow and
cannot be moved using top, left, right, or bottom.
This element simply appears where the HTML places it. No special positioning is applied.
position: relative;
A relative element stays in the normal document flow, but you can shift it slightly using
top, left, right, or bottom. It also becomes the positioning
reference for any absolutely positioned children.
position: relative; top: 10px; left: 20px;:
The original layout space is still reserved, even though the box looks shifted.
position: absolute;
An absolute element is removed from the normal document flow. It is positioned relative to the
nearest ancestor that has position set to relative, absolute, or
fixed. If none is found, it uses the page (viewport) as the reference.
position: relative;)
(
top: 12px; right: 12px;)
The absolute element ignores the normal flow and “floats” on top, using the parent as a reference frame.
position: fixed;
A fixed element is taken out of the document flow and attached to the viewport. It stays in the same place on the screen even when the page is scrolled (like a floating button or a sticky header).
In real code, you would use something like position: fixed; bottom: 20px; right: 20px; for a floating button.
position: sticky;
A sticky element starts as relative, scrolling normally with the page.
Once it reaches a specified threshold, it behaves like a
fixed element and sticks in place.
As you scroll, the sticky element “sticks” to its position (for example the top of the viewport) and stays visible.
<div class="modal-box">
<button class="close-btn">✕</button>
This is a modal box.
</div>
/* CSS */
.modal-box {
/* parent */
position: relative;
...
}
.close-btn {
/* positioned relative */
position: absolute;
top: 10px;
right: 10px;
...
}
(
position: relative;)
Little Tips
1. top and left are measured from the element’s top-left corner
When you position an element using top or left, CSS always measures
from the element’s top-left corner. It never uses the center unless you explicitly adjust it.
(
top: 20px; left: 30px;)
The element’s own top-left corner is moved to (top, left).
2. Aligning elements by their center (circular or geometric “center point”)
To center an element based on its actual center instead of its top-left corner, you must combine percentage positioning with a translation. This shifts the element back by half of its own size.
top:50%; left:50%;
transform: translate(-50%, -50%);
50% + translate() is the universal formula for perfect center alignment.
3. What negative top / left values mean
A negative value moves the element in the opposite direction. For example:
top: -20px;moves the element up by 20pxleft: -30px;moves the element left by 30px
top:-20px; left:-30px;
Negative values pull the element outward from the reference point.
Leave a Reply