Position Values

/* Static (default) - normal document flow */
position: static;

/* Relative - offset from normal position */
position: relative;
top: 10px; left: 20px;  /* Moves down 10, right 20 */

/* Absolute - positioned relative to nearest positioned parent */
.parent { position: relative; }
.child {
    position: absolute;
    top: 0; right: 0;  /* Top-right corner of parent */
}

/* Fixed - stays in place during scroll */
.navbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 1000;
}

/* Sticky - switches between relative and fixed */
.header {
    position: sticky;
    top: 0;  /* Sticks when scrolled to top */
}

Z-Index (Stacking Order)

/* Higher z-index = appears on top */
.modal { z-index: 1000; }
.overlay { z-index: 999; }
.content { z-index: 1; }
/* z-index only works on positioned elements! */

Float & Clear (Legacy)

img { float: left; margin-right: 1rem; }
.clearfix::after { content: ""; display: block; clear: both; }
/* Use Flexbox/Grid instead of floats for layout! */

Overflow

overflow: visible;  /* Content overflows (default) */
overflow: hidden;   /* Content clipped */
overflow: scroll;   /* Always show scrollbar */
overflow: auto;     /* Scrollbar only when needed */

✅ Quick Quiz

← Previous Next: Responsive Design →