position
property
Specifies how an element is positioned in a document. Combined with top, right, bottom, left.
Syntax
position: static | relative | absolute | fixed | sticky;
Example
css
/* Relative: offset from normal position */
.relative { position: relative; top: 10px; left: 20px; }
/* Absolute: removed from flow, relative to nearest positioned ancestor */
.tooltip {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
}
/* Fixed: stays in viewport */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
/* Sticky: switches between relative and fixed */
.sticky-header {
position: sticky;
top: 0;
}