Lesson 7 — Layout

Display and Positioning

The display property determines how an element behaves in the page flow, while position lets you take an element out of that flow entirely for precise placement.

Display Types

Block elements start on a new line and take the full available width; inline elements flow within text and ignore width/height; inline-block behaves like inline but respects width, height, and vertical margin.

CSS — Display values 
.block-el   { display: block; }
.inline-el  { display: inline; }
.hybrid-el  { display: inline-block; width: 120px; }
.hidden-el  { display: none; } /* removed from layout entirely */

Position Values

Position controls how and relative to what an element is placed. Understanding the difference between these values resolves most layout confusion beginners run into.

  • static — the default; follows normal document flow.
  • relative — offsets from where the element would normally sit, without affecting other elements.
  • absolute — removed from flow, positioned relative to the nearest positioned ancestor.
  • fixed — positioned relative to the viewport, stays in place when scrolling.
  • sticky — behaves like relative until a scroll threshold, then sticks like fixed.

Common Mistakes

  • Using position: absolute without first setting position: relative on the intended parent, causing the element to position against the whole page instead.
  • Confusing display: none (removes the element and its space entirely) with visibility: hidden (hides it but keeps its space).
  • Forgetting that fixed elements are positioned relative to the viewport, not their parent container.
  • Overusing absolute positioning for general layout instead of flexbox or grid, leading to brittle, hard-to-maintain pages.

Professional Tip

Reach for position: absolute only for small, self-contained needs — like a badge in the corner of a card — and use flexbox or grid (covered in upcoming lessons) for overall page layout.

Your Turn

Build a card with a relatively-positioned container and an absolutely-positioned "New" badge in its top-right corner.

Mini Quiz

Which position value keeps an element fixed relative to the browser viewport, even while scrolling?