Document flow
Last updated
Was this helpful?
Last updated
Was this helpful?
In addition to styling elements, CSS can manipulate how the elements flow. The flow refers to how the element follow each other in the document, and how they behave next to each other. Each element has a default rule, e.g. block elements will start on a new line, while the inline elements will continue on the same line. This behaviour can be changed using the CSS properties float, positionand z-index.
If one block element sits inside another block element, then the outer element is know as the containing or parent element. It is common to group a number of elements together inside a <div> (or other block-level) element. E.g., you might group together all of the elements that form the header of a site (such as the logo and the main navigation). The <div> element that contains this group of elements is then referred to as the containing (or parent) element. An element may be nested inside several other block-level elements. The containing element is always the direct parent of that element.
CSS has the following position schemes that allow you to control the layout of a page: normal flow, relative positioning, and absolute positioning. You specify the positioning scheme using the position property. You can also float elements using the float property.
In normal flow, each block-level element sits on top of the next one. Since this is the default way in which browsers treat HTML elements, you do not need a CSS property to indicate that elements should appear in normal flow, but the syntax would be position: static;.
In the example below, the width property for the heading has not been specified, so you can see how it stretches the width of the entire browser window by default. The paragraphs are restricted to 450 pixels wide. This shows how the elements in normal flow start on a new line even if they do not take up the full width of the browser window. All of the examples demonstrated in this section, and the rest about document flow, will use a similar HTML structure.
HTML
CSS
The second paragraph has been pushed down and right from where it would otherwise have been in a normal flow.
Relative positioning moves an element in relation to where it would have been in normal flow. E.g., you can move it 10 pixels lower than it would have been in normal flow, or 20% to the right. You can indicate that an element should be relatively positioned using the position property with the value relative.
You then use the offset properties (top, bottom, left or right) to indicate how far to move the element from where it would have been in normal flow. To move the box up or down, you can use either the top or bottom properties. To move the box horizontally you can use either the left or right properties. The values of the box offset properties are usually given in pixels, percentages or ems.
The following code is for the example given above:
HTML
CSS
This positions the element in relation to its containing element. It is taken out of normal flow, meaning that it does not affect the position of any surrounding elements (as they simply ignore the space it would have taken up). Absolutely positioned elements move as users scroll up and down the page.
In this example, the heading has been positioned at the top of the page and 500 pixels from its left edge. The width of the heading is set to be 250 pixels wide. The `width` property has also been applied to the `<p>` elements in this example to prevent the text from overlapping and becoming unreadable.
The following code is for the example given above:
HTML
CSS
When the position property is given a value of absolute. the box is taken out of normal flow and no longer affects the position of other elements on the page (they act like it is not there). The box offset properties (top, bottom, left or right) specify where the element should appear in relation to its containing element.
The heading has been placed in the center of the page and 100px from the top of the screen (the rest appears in normal flow).
In the example below, the heading has been positioned to the top left hand corner of the browser window. When the user scrolls down the page, the paragraphs disappear behind the heading. The <p> elements are in normal flow and ignore the space that the <h1> element would have taken up. Therefore, the margin-top property has been used to push the first <p> element below where the fixed position <h1> element is sitting.
HTML
CSS
Floating an element allows you to take that element out of the normal flow and position it to the far left or right of a containing box. The floated element becomes a block-level element around which other content can flow.
The heading has been floated to the left, allowing the paragraph of text to flow around it.
When you use the float property, you should also use the width property to indicate how wide the floated element should be. If you do not, results can be inconsistent but the box is likely to take up the full width of the containing element (just like it would in normal flow).
In the example below, a <blockquote> element is used to hold a quotation. It's containing element is the <body> element. The <blockquote> element is floated to the right, and the paragraphs that follow the quote flow around the floated element.
HTML
CSS
You can use float to place elements side-by-side, if you e.g. would like a design with boxes next to each other.
When elements are floated, the height of the boxes can affect where the following elements sit. In the example below, you can see six paragraphs, each of which has a width and a float property set. The fourth paragraph does not go across to the left hand edge of the page as one might expect. Rather it sits right under the third paragraph. The reason for this is that the fourth paragraph has space to start under the third paragraph, but it cannot go any further to the left because the second paragraph is in the way.
HTML
CSS
Setting the height of the paragraphs to be the same height as the tallest paragraph would solve this issue, but it is rarely suited to real world designs where the amount of text in a paragraph or column may vary. It is more common to use the clear property (discussed further down) to solve this.
The clear property allows you to say that no element (within the same containing element) should touch the left or right-hand side of a box. It can take the following values:
left: The left-hand side of the box should not touch any other elements appearing in the same containing element.
right: The right-hand side of the box will not touch elements appearing in the same containing element.
both: Neither the left nor right-hand sides of the box will touch elements appearing in the same containing element.
none: Elements can touch either side.
In the example below, the fourth paragraph has a class called clear. The CSS rule for this class uses the clear property to indicate that nothing should touch the left-hand side of it. The fourth paragraph is therefore moved further down the page so no other element touches its left-hand side.
HTML
CSS
When you use relative, fixed or absolute positioning, boxes can overlap. If boxes do overlap, the elements that appear later in the HTML code sit on top of those that are earlier in the page.
If you want to control which elements sits on top, you can use the z-index property. Its value is a number, and the higher the number the closer that element is to the front. E.g., an element with a z-index of 10 will appear over the top of one with a z-index of 5.
Every block element appears on a new line, causing each item to appear lower down on the page than the previous one. Even if you specify the width of the boxes and there is space for two elements to sit side-by-side, they will not appear next to each other. This is the default behaviour (unless you tell the browser to do something else).
This moves an element from the position it will be in normal flow, shifting it to the top, right, bottom, or left of where it would have been placed. This does not affect the position of surrounding elements; they stay in the position they would be in in normal flow.
This is a form of absolute positioning that positions the element in relation to the browser window, as opposed to the containing element. Elements with fixed positioning do not affect the position of surrounding elements and they do not move when the user scrolls up or down the page.
