Box Model & Layout

CSS Position

Static, Relative, Absolute, Fixed, Sticky.

1Positioning Types

Relative moves from normal spot. Absolute moves relative to nearest positioned ancestor.

Example Code

css

.relative {
  position: relative;
  top: 10px;
}
.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

2Understand it in a real interface

Relative positioning preserves the element’s normal layout space while allowing a visual offset. An absolutely positioned element leaves normal flow and uses its containing block for placement. Fixed and sticky positioning have their own scrolling relationships, and ancestor styles can affect how they behave.

3Try it yourself

Place a small label in a card. Make the card positioned and the label absolute, then move the label to a corner. Add longer card content and check that the label does not cover it. Compare the result with a normal-flow label that reserves its own space.

Finished reading?

Mark this topic as complete to track progress.

CSS Max-widths

Next Topic

CSS Z-index