📐 Display and Positioning Properties

Layout as Arranging a Room

Think of building a web layout like arranging furniture in a room. For every element you place, you make a few decisions: what type of furniture it is (does a sofa span the whole wall, or is it a small stool that tucks beside other things?), where exactly it sits, how much space it claims, and how it relates to everything around it.

CSS gives you two master controls for those decisions. The display property answers "what kind of box is this and how does it flow?" The position property answers "where does this box sit, and does it stay in the flow or float above it?" Almost everything else in layout builds on top of these two.

💡 The big idea: Most layout confusion comes from mixing up these two questions. "Why won't my width work?" is usually a display question. "Why is my badge in the wrong corner?" is usually a position question. Keep them separate in your head and debugging gets far easier.

The Display Property

The display property is arguably the single most important property for layout. It determines how an element behaves in the normal document flow and how it relates to its neighbours. Here is the family of values you will meet most often:

We will study flex and grid in depth in later modules — they are the modern workhorses of layout. In this lesson we focus on the four foundational values every developer uses daily: block, inline, inline-block, and none.

Core Display Values

block

Block elements start on a new line, stretch to fill the available width by default, and fully respect width, height, margin, and padding. Examples: <div>, <p>, <h1>, <section>.

inline

Inline elements flow inside a line of text and only take up as much width as their content needs. Crucially, they ignore width and height, and vertical margins do not push other content. Examples: <span>, <a>, <strong>, <em>.

inline-block

The hybrid. It flows inside text like an inline element but honours width, height, and margins on all four sides like a block. This made it the classic choice for horizontal nav bars and simple grids before flexbox existed.

none

Removes the element completely: it renders nothing and reserves no space. This is different from visibility: hidden, which hides the element but keeps its empty footprint in the layout.

Changing an element's display

Display is not fixed by the tag — you reassign it freely. A common example is turning navigation links into padded, clickable inline-block buttons:

/* Turn plain links into a horizontal button row */
nav.horizontal-menu a {
  display: inline-block;
  padding: 10px 15px;
  margin: 0 5px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

/* Force an inline <span> to behave like a sized block */
span.badge-block {
  display: block;
  width: 120px;
  height: 40px;
}

The Position Property

Where display controls how an element flows, position controls how it is placed relative to the page or its ancestors. There are five values:

static

The default. The element sits in normal flow and ignores top/right/bottom/left and z-index. You rarely write it explicitly.

relative

The element stays in the flow — its original space is preserved — but you can nudge it visually with the offset properties. Just as important, position: relative turns the element into a positioning context for any absolutely positioned children. This "relative parent, absolute child" pairing is the most important pattern in this whole lesson.

absolute

The element is removed from the flow entirely (it reserves no space) and is positioned relative to its nearest positioned ancestor — the closest parent whose position is anything other than static. If none exists, it falls back to the page's initial containing block.

fixed

Also removed from flow, but positioned relative to the viewport, so it stays put as the page scrolls. Perfect for sticky headers, chat widgets, cookie bars, and back-to-top buttons.

sticky

A hybrid: the element behaves like relative until you scroll past a threshold you set (for example top: 0), at which point it "sticks" like fixed within its scroll container. Section headers in a long list are the classic use.

/* The essential relative-parent / absolute-child pairing */
.card {
  position: relative;   /* becomes the reference frame */
}

.card .badge {
  position: absolute;   /* placed against the card, not the page */
  top: -10px;
  right: -10px;
}

/* A header that stays visible while scrolling */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

Offsets & z-index

Once an element is positioned (anything other than static), four offset properties place it precisely:

• top — distance from the top edge of the containing block
• right — distance from the right edge
• bottom — distance from the bottom edge
• left — distance from the left edge

/* Pin to the bottom-right corner */
.corner {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/* Perfectly centre an element of unknown size */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Full-cover overlay (all four offsets = 0) */
.overlay {
  position: absolute;
  inset: 0;                 /* modern shorthand for top/right/bottom/left: 0 */
  background: rgba(0, 0, 0, 0.5);
}

Stacking with z-index

When positioned elements overlap, z-index decides who sits on top. Higher values render in front. A few rules trip people up:

• z-index only affects positioned elements (not static).
• Values can be positive or negative; the default is auto (treated as 0).
• Elements only compete within the same stacking context. A child with z-index: 9999 can never escape above a sibling of its parent if the parent forms its own context.

/* A modal that sits above everything, with a dimmed backdrop */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  z-index: 1001;   /* one above the backdrop */
}

Common Layout Patterns

Display and position combine into a handful of patterns you will reach for constantly.

Centering an element

/* Horizontal centering of a block with a known width */
.center-block {
  width: 50%;
  margin-inline: auto;   /* left & right auto */
}

/* Dead-centre, both axes, unknown size — the flexbox way (preferred) */
.center-flex {
  display: flex;
  justify-content: center;  /* horizontal */
  align-items: center;      /* vertical */
  min-height: 200px;
}

/* Dead-centre with the absolute + transform trick (pre-flexbox) */
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Image with a caption overlay

.image-container {
  position: relative;
  display: inline-block;
}

.overlay-text {
  position: absolute;
  inset: auto 0 0 0;         /* pin to the bottom edge */
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
}

Card with a corner badge

.card {
  position: relative;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.card .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e11d48;
  color: white;
  display: flex;             /* centre the number inside */
  align-items: center;
  justify-content: center;
}

Hands-on Exercise

<div class="product-card">
  <span class="sale-badge">-20%</span>
  <h3>Trail Running Shoe</h3>
  <p>$96.00</p>
</div>

<div class="modal-backdrop">
  <div class="modal-content">
    <h3>Trail Running Shoe</h3>
    <p>Lightweight, grippy, waterproof.</p>
  </div>
</div>

.product-card {
  position: relative;
  width: 220px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.sale-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #e11d48;
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  z-index: 1001;
}

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — The display property
• MDN — The position property
• MDN — Understanding z-index & stacking contexts

🚀 What's Next?

Next we step back in time to the layout technique that ruled the web before flexbox: floats. You'll see how float and clear work, why they cause containers to collapse, and how the modern display: flow-root tames them.