Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by znzlcrstkk
.a{fill-rule:evenodd;}techdegree seal-36
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Points

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
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)