Display and position

What you will learn

• display: block, inline, inline-block, none
• position: static, relative, absolute, fixed, sticky
• offsets top, right, bottom, left and stacking with z-index

Understand the idea

display decides how an element takes part in the page flow. A block element (paragraph, div) starts on a new line and fills the width. An inline element (span, a) flows within a line and ignores width and height. inline-block flows in a line but accepts width and height. display: none removes the element completely, and it takes no space.

position decides where a box goes. static is the default: normal flow. relative keeps the box in the flow but lets you nudge it with top, left and so on, and it also becomes the reference point for children. absolute takes the box out of the flow and places it relative to the nearest ancestor that is positioned (not static), or to the page if there is none. fixed pins a box to the browser window, so it stays put while scrolling, and sticky scrolls normally until it reaches an edge, then sticks.

A classic pattern: give a parent position: relative and a child position: absolute with top and right, which pins the child to the parent's corner, perfect for a badge. When boxes overlap, z-index decides which is on top: the higher number wins.

Example

.card {
  position: relative;
  padding: 24px;
  border: 2px solid slateblue;
}

.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: crimson;
  color: white;
  padding: 2px 8px;
}

Your turn: code to type and practise

Make .card position: relative, pin .badge to its top-right corner with position: absolute, top and right, and hide .hide-me with display: none.

← The box modelResponsive design and the 12-column grid →