Absolute Positioning: To the Root Element

Okay, enough terminology. It's time to have some fun and actually put positioning to work! Absolute positioning positions an element box in relation to its containing block. When you position something absolutely, you take it completely out of the normal flow. In easy terms, this means that any box you position will always be positioned to either its explicit container or to the html root element (not the viewport), no matter what other content might be on the page.

Oh, good! Now you get to see why I had to spend time up front to detail the terminology. In Example 12-3, I've placed a header and a paragraph into a containing block, and then positioned the block to an offset of 100 pixels from the ...

Get Spring Into HTML and CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.