Positioned boxes and inline content

An absolutely positioned box among inline content is taken out of the line, so the text around it carries on as if it were not there. When its nearest positioned ancestor is an inline, that inline is its containing block.

Anchored to a word

The contract renews on the anniversary datesee clause 4.2 unless either party gives written notice ninety days before it.

An inline that wraps

The pins sit at the top-left of the inline's first line and the bottom-right of its last line: the corners of the containing block the two fragments form.

Text before the positioned inline, long enough to wrap onto a second line and text after it.

An inline holding only the positioned box

Each badge's inline wrapper has no text of its own, so it is a zero-width box between the words, and the badge hangs from that point.

Status: shippednew and reviewed2 comments this week.

An empty inline with a larger font

The wrapper holds no text, but it is still an inline box on the line, so its 28pt font makes the line taller and the text sits lower on the shared baseline. The pins mark the top-left and bottom-left of the wrapper's content area, which now lies inside the grey line.

Before the badge and after it.

The line is not broken

The words after a positioned note A note placed at the top right of the paragraph.continue on the same line, and an outlined span holding one keeps its outlineA second note..

An independent positioned box after a float

The navigation float must not shift the cart icon or badge outside the dark bar.

Shop   Products   About
6