Chapter 1.6☕ 14 min read

Display & Visibility

Control how elements show up, hide, and flow in layout. From block to flex, visible to hidden — master the flow.

01Display Properties — Layout Foundation

The display property controls how an element behaves in the layout flow. This is the most important layout property in CSS.

Property Type Description

display: block Block-level Takes full width, starts on new line. Examples: <div>, <p>, <h1>

display: inline Inline-level Only takes needed width, flows with text. Examples: <span>, <a>, <strong>

display: inline-block Inline-block Block properties but flows inline. Can set width/height.

display: flex Flexbox Modern layout system for flexible, responsive designs.

display: grid CSS Grid 2D layout system for complex grid-based designs.

display: none Hidden Completely removed from layout. Not visible, not taking space. Not in accessibility tree.

/* Block — full width, new line */
.block { display: block; width: 100%; padding: 16px; }

/* Inline — width of content only, flows inline */
.inline { display: inline; color: #f97316; }

/* Inline-block — best of both worlds */
.inline-block { display: inline-block; width: 200px; height: 100px; margin: 8px; }

/* Flex — powerful 1D layout */
.flex-container { display: flex; gap: 16px; justify-content: center; }

/* Grid — powerful 2D layout */
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* None — completely hidden */
.hidden { display: none; }

02Visibility — Show or Hide

Control element visibility without affecting layout flow (except display: none).

Method Effect on Layout Accessibility

visibility: visible Takes up space Available to screen readers

visibility: hidden Takes up space Hidden from screen readers

opacity: 0 Takes up space Available to screen readers (still interactive!)

display: none No space taken Hidden from screen readers

aria-hidden="true" No visual effect alone Hidden from screen readers only

.hidden-vis { visibility: hidden; }        /* Invisible, but takes space */
.transparent { opacity: 0; }                /* Invisible, interactive, takes space */
.gone { display: none; }                    /* Completely removed */

🚨

Important: display: none removes element from accessibility tree too — screen readers can't see it. Use visibility: hidden if you want to hide visually but keep the space. Use opacity: 0 if you want it invisible but still interactive.

03Overflow — Handling Content Spill

What happens when content is too big for its container? Control overflow behavior.

Property Behavior

overflow: visible Content spills out of container (default). Element may overlap nearby elements.

overflow: hidden Content is clipped. Nothing outside container shows. No scrollbars.

overflow: scroll Always show scrollbars even if content fits. Best for code editors.

overflow: auto Show scrollbars only when needed. Most commonly used.

overflow-x / overflow-y Control horizontal or vertical axis separately.

.card {
  width: 300px;
  height: 150px;
  overflow: auto;           /* Scrollbars only when needed */
  overflow-x: hidden;       /* Prevent horizontal scroll */
}

Pro Tip: Use overflow: auto by default for containers with dynamic content. Use overflow: hidden to create rounded corners with border-radius (content won't poke out).

04Z-index — Stacking Context

Control which elements appear on top when they overlap. Z-index only works on positioned elements (not static).

Value Use Case

z-index: auto Default. Same as parent stacking context. Non-positioned elements.

z-index: 1 Low elevation over normal content. Decorative overlays.

z-index: 10 Medium elevation. Dropdowns, tooltips, sticky headers.

z-index: 100 High elevation. Modals, popups, full-screen overlays.

z-index: 9999 Emergency override. Everything on top. Use very sparingly.

z-index: -1 Behind normal content. Background decorations, shadows behind content.

.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999;              /* Above everything */
}

.modal-content {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;             /* Above overlay */
}

.tooltip {
  position: absolute;
  z-index: 10;               /* Above normal content */
}

Important: Z-index only works on elements with position set to anything other than static (relative, absolute, fixed, sticky). Z-index creates a new stacking context — children of an element can't escape their parent's z-index layer.

05Exercise — Display & Visibility Playground

Write CSS below and experiment with display, visibility, overflow, and z-index.

Open VS Code. Create display-practice.html.

Use the starter code and experiment:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Display Practice</title>
  <style>
    .container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
    .box { background: #f97316; color: white; padding: 20px; border-radius: 8px; text-align: center; width: 150px; }
    .hidden-box { visibility: hidden; }
    .transparent { opacity: 0.5; }
    .overflow-box { width: 200px; height: 100px; overflow: auto; background: #fff7ed; border: 1px solid #f97316; padding: 10px; }
    .z-container { position: relative; height: 200px; }
    .z-box { position: absolute; width: 100px; height: 100px; padding: 10px; text-align: center; border-radius: 8px; color: white; }
    .z1 { background: #f97316; z-index: 1; left: 20px; top: 20px; }
    .z2 { background: #3b82f6; z-index: 2; left: 60px; top: 60px; }
    .z3 { background: #10b981; z-index: 3; left: 100px; top: 100px; }
  </style>
</head>
<body>
  <h2>Display Types</h2>
  <div class="container">
    <div class="box">Block</div>
    <div class="box" style="display:inline-block">Inline-block</div>
    <div class="box" style="display:flex">Flex</div>
  </div>
  <h2>Visibility</h2>
  <div class="container">
    <div class="box">Visible</div>
    <div class="box hidden-box">Hidden</div>
    <div class="box transparent">Opacity 0.5</div>
  </div>
  <h2>Overflow</h2>
  <div class="overflow-box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <h2>Z-index</h2>
  <div class="z-container">
    <div class="z-box z1">z: 1</div>
    <div class="z-box z2">z: 2</div>
    <div class="z-box z3">z: 3</div>
  </div>
</body>
</html>

Try these experiments:

Change display: block to display: inline — see width shrink Set visibility: hidden on a box — note it still takes space Compare display: none vs visibility: hidden — space difference Try overflow: scroll vs overflow: auto on the overflow box Swap z-index values — put z1 on top with z-index: 10

Done — Key Points:

✅ display: block = full width, new line. inline = content width only. inline-block = both.
✅ display: none removes from layout + accessibility tree. visibility: hidden keeps space but hides visually.
✅ opacity: 0 makes element invisible but still interactive and takes space.
✅ overflow: auto = scrollbars only when needed. overflow: hidden clips content.
✅ Z-index only works on positioned elements (relative, absolute, fixed, sticky) — not static.
✅ Z-index creates stacking contexts — children can't escape parent's z-index layer.

Previous1.5 — Advanced Typography & Text Layout 📋 All Chapters Next Chapter1.7 — Positioning & Layout Flow →