Follow normal flow and positioning

One idea at a time

Normal flow is the browser's ordinary arrangement before special positioning or layout rules. Block boxes generally start a new line; inline content runs within a line and wraps with the text. A div is a neutral block container and a span is a neutral inline wrapper. Their default display can be changed without changing the meaning of their HTML.

display controls how a box participates in layout. inline-block can sit alongside inline content while accepting width and height. display: none removes the element’s box and generally removes it from the accessibility tree, the browser’s representation used by assistive tools such as screen readers. Do not hide necessary instructions just because the screen is narrow. If content changes size, ordinary flow lets nearby content move with it.

What to remember first

Walk through an example

<div class="panel">
  <span class="badge">New</span>
  <p>A short reading note with room for its badge.</p>
</div>
<p>Another paragraph follows the panel.</p>

.panel {
  position: relative;
  padding: 48px 16px 16px;
  border: 1px solid #64748b;
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: #e0e7ff;
  color: #312e81;
  padding: 4px;
}

The panel establishes the reference for its absolute badge. top and right measure from that reference rather than from an unrelated page corner. padding: 48px 16px 16px means 48px at the top, 16px on both sides, and 16px at the bottom. Extra top padding deliberately leaves room for the badge so it does not cover the paragraph. The paragraph after the panel remains in flow. Notice that positioning the badge does not give it new semantic meaning.

See it happen: try a small change

.panel {
  padding: 16px;
  border: 1px solid #64748b;
}
.badge {
  background-color: #e0e7ff;
  color: #312e81;
  padding: 4px;
}

Look a little closer

For a sticky heading, use position: sticky with an inset such as top: 0. It needs enough scrolling room and stays limited by its containing context. A fixed header can obscure content unless you account for its space. Transform and other ancestor properties can establish containing blocks, so nearest positioned ancestor is a useful starting model for this simple example, not the entire positioning specification.

float is still useful when text should wrap around a small image or illustration. float: right lets surrounding inline content wrap to its left; clear: both moves a later block below preceding floats. Prefer Flexbox and Grid for arranging whole interfaces. Floats are not obsolete, but copying an old float-based page layout is unnecessary here.

Try display before adding offsets

The extra preview changes only the span's display. width requests 120px, but ordinary inline text does not honor width like a block or inline-block. The backgrounds and padding are teaching aids so you can see the box boundaries.

.label {
  display: inline;
  width: 120px;
  padding: 4px;
  background-color: #e0e7ff;
}

Try it in your own project

Copy the panel and badge into body and use the positioning rules. Temporarily remove position: absolute from the badge to see its original place in flow. Restore it and enlarge the note text; if the badge overlaps it, increase the deliberately reserved top padding.

The preview uses a small set of readable starting styles for its font, spacing, and controls. The code to notice shows the lesson's own rules. Your local browser defaults may look different before you add those rules; focus on the relationship being demonstrated rather than matching every pixel of the preview.

A common wrong turn

An absolutely positioned child does not make its parent taller. If you use it for all the content, the parent can appear empty or collapse and overlap nearby content. Keep ordinary writing in flow and reserve positioning for small intentional relationships.

Go to the source

• MDN: Follow normal flow and positioning ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.