Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Normal document flow

Can somebody explain to me what in css positioning means normal document flow and what means element taken out of normal document flow?

1 Answer

Ezra Siton
Ezra Siton
12,644 Points

Related topic: https://teamtreehouse.com/community/what-is-the-normal-document-flow

Related course: https://teamtreehouse.com/library/css-layout-basics

Normal document flow it's like saying position: static"- "normal behavior of the browser"

The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

In the most simple view: If you turn off CSS you get the "normal flow" :) when you add to your site "sticky-fixed-nav" you taken out this nav from the normal flow of the doc.

position: relative

Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning (W3C)

position: absolute

In the absolute positioning model, a box is removed from the normal flow entirely (W3C)

position: fixed

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport (W3C)

W3C: https://www.w3.org/TR/CSS21/visuren.html#normal-flow

Summary: The best way to learn this issue is by examples (treehouse, codepen and so on)