CSS — Lesson 9
CSS Position
Controlling element placement with position properties.
CSS Position
The position property controls how an element is positioned in the document.
Position Values
/* Static: default */
.static { position: static; }
/* Relative: offset from normal position */
.relative { position: relative; top: 10px; }
/* Absolute: relative to nearest positioned ancestor */
.absolute { position: absolute; top: 0; right: 0; }
/* Fixed: relative to viewport */
.fixed { position: fixed; top: 0; width: 100%; }
/* Sticky: toggles between relative and fixed */
.sticky { position: sticky; top: 0; }
Absolute Positioning
A parent needs position: relative for absolute children to be contained within it.
.parent { position: relative; }
.child { position: absolute; top: 20px; left: 20px; }
z-index
Controls stacking order of positioned elements. Higher values appear in front.
.overlay { position: fixed; z-index: 1000; }
Tip: Avoid
position: absolute for page layouts. Use Flexbox or Grid instead. Reserve absolute/fixed for overlays, modals, and tooltips.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →