Display & positioning

1Normal flow

If you write no layout CSS at all, the browser still places things by a fixed rule called normal flow: block elements (div, p, h1, section, nav) stack top to bottom and each takes the full width. Inline elements (a, span, strong, img) sit side by side in a line and wrap like text.

2display

display decides what kind of box an element is, and how its children are laid out.

display: none vs visibility: hidden vs opacity: 0

3The box model

Every element is a box made of four layers, from inside out: content, padding (space inside the border), border, margin (space outside, between elements).

Always set box-sizing: border-box

By default, width: 300px plus padding: 20px makes a box 340px wide, and this is the most common reason things overflow. With border-box, padding and border are counted inside the width.

*, *::before, *::after { box-sizing: border-box; }

Margin shorthand

margin: 10px;              /* all four sides */
margin: 10px 20px;         /* vertical | horizontal */
margin: 10px 20px 30px;    /* top | horizontal | bottom */
margin: 10px 20px 30px 40px; /* top right bottom left (clockwise) */
margin: 0 auto;            /* centers a block that has a width */
margin-left: auto;         /* pushes an element to the far right */

4position

position controls whether an element stays in the normal flow. Together with top, right, bottom, left it nudges or pins it.

Try it

Set the parent to static and watch the target measure from the outer page instead of its parent. Choose relative and notice the siblings do not move, because the original space is kept. Choose absolute and the siblings close the gap, because the box left the flow.

Offset shortcuts

inset: 0;                 /* top, right, bottom, left all 0: stretch to fill the parent */
position: absolute; top: 0; right: 0;     /* pin to top-right corner */
position: absolute; inset: 0; margin: auto; width: 200px; height: 100px; /* centered */

fixed

.chat-button { position: fixed; right: 20px; bottom: 20px; }

Stays in place while you scroll. Some ancestor properties can change its containing block; for example, if a parent has transform, filter or perspective, the fixed element measures from that parent instead.

sticky

Needs a threshold (such as top: 0) and room to move within its container. The page itself can provide the scrolling. Scroll the box below.

header { position: sticky; top: 0; z-index: 10; background: #fff; }

5z-index & stacking

z-index decides which overlapping element is on top. Higher wins. It only works on elements that are positioned (not static) or that are flex/grid children.

/* a simple scale that avoids chaos */
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 300;
--z-toast: 400;

6Flexbox

Use flexbox to lay items out along one direction: navbars, button groups, cards in a row, a label next to an input. Set display: flex on the parent; its direct children become flex items.

.row { display: flex; gap: 16px; }

Two axes matter. The main axis is the direction of the row (horizontal by default). The cross axis is the other one. justify-content works on the main axis and align-items on the cross axis. If you flip to flex-direction: column, they swap.

Try it

Container properties

Item properties

7Grid

Use grid when you need rows and columns together: page layouts, card galleries, dashboards, forms. Set display: grid on the parent and define the columns.

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;   /* three columns, middle twice as wide */
  gap: 16px;
}
.wide { grid-column: 1 / 3; }           /* from line 1 to line 3 = 2 columns */

Responsive cards with no media query

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

Each card is at least 240px wide, and the browser fits as many per row as it can.

Page layout with named areas

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "side   main"
    "footer footer";
  min-height: 100vh;
}
header { grid-area: header; }
aside  { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: footer; }

8Centering

/* 1. Center anything, horizontally and vertically (best default) */
.parent { display: grid; place-items: center; }

/* 2. Same with flex */
.parent { display: flex; justify-content: center; align-items: center; }

/* 3. Center a block horizontally only */
.box { width: 600px; max-width: 100%; margin: 0 auto; }

/* 4. Center text */
.text { text-align: center; }

/* 5. Center an absolutely positioned element */
.box { position: absolute; inset: 0; margin: auto; width: 200px; height: 100px; }

/* 6. Center on the full screen */
.parent { min-height: 100vh; display: grid; place-items: center; }

9Tasks: how do I…?

<nav class="nav"><a class="logo">DECT</a><ul class="links">…</ul></nav>

.nav   { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px; }
.links { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }

.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav .cta { justify-self: end; }

.nav { position: sticky; top: 0; z-index: 100; background: #fff; }

.links { display: flex; gap: 16px; }
.links .login { margin-left: auto; }

.card  { position: relative; padding: 24px; }
.close { position: absolute; top: 12px; right: 12px; }

.icon  { position: relative; display: inline-block; }
.badge { position: absolute; top: -6px; right: -6px; }

.fab { position: fixed; right: 20px; bottom: 20px; z-index: 50; }

.item     { position: relative; }
.dropdown { position: absolute; top: 100%; left: 0; display: none; min-width: 180px; z-index: 100; }
.item:hover .dropdown { display: block; }

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: grid; place-items: center; z-index: 300; }
.modal   { background: #fff; padding: 24px; width: min(480px, 92vw); border-radius: 8px; }

body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; }
main { flex: 1; }   /* takes all leftover space, footer is pushed down */

.layout  { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.sidebar { position: sticky; top: 16px; align-self: start; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card  { display: flex; flex-direction: column; }
.card .btn { margin-top: auto; }

.actions { display: flex; gap: 12px; }

.hero { min-height: 100vh; display: grid; place-items: center; text-align: center; }

.row { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 768px) { .row { flex-direction: row; } .row > * { flex: 1; } }

.burger { display: none; }
@media (max-width: 767px) { .links { display: none; } .burger { display: block; } }

.hero { position: relative; }
.hero img { width: 100%; display: block; }
.hero .text { position: absolute; left: 24px; bottom: 24px; color: #fff; }

10Common problems

Debug routine

/* 1. Show every box */
* { outline: 1px solid rgba(255,0,0,.4); }

/* 2. In the browser: right-click → Inspect → hover the element
      The colors show margin, border, padding and content.
   3. Check the "Computed" tab for the real display and position. */

11Units & sizing

width: min(1100px, 92%);               /* never wider than 1100px, never touching the edges */
font-size: clamp(1rem, 2.5vw, 1.5rem); /* min | preferred | max */
.container { max-width: 1100px; margin-inline: auto; padding-inline: 20px; }
img { max-width: 100%; height: auto; }  /* images never overflow */

12Cheat sheet