Forum Moderators: not2easy
This is intended as an overview of the types of positioning with CSS. It is very simple, and while it covers all of the methods of positioning with CSS, it doesn’t delve into the finer details of descendant blocks, and the different ways that the positioning of inline elements and block level elements in the descendant blocks are affected. These could be the subject matter for a second look at CSS - Positioning.
The Box Model
It is crucial that users of CSS understand the CSS Box Model [w3.org]. If you know not what it is, check that link and then get back here!
Understanding Normal Flow
Although fairly simple, understanding normal flow is critical to understanding the positioning options that exist with CSS. For our convenience, the normal flow of a document could be defined as the position where you would expect an element to be found if no CSS positioning was applied to that element.
The default value for the position attribute of an element (<div>, <span> etc.) in CSS is static, which in CSS terms means that the element's box (wrt CSS Box Model) is part of the normal flow of the document. Any element that is not ‘position:fixed’, ‘position:absolute’, will find itself a part of and positioned with respect to the normal flow.
As we will see below, you have to keep in mind the normal flow of the document when using either ‘float’ or ‘position:relative’. Only with ‘position: fixed’ or ‘position: absolute’ do you remove an element from the normal flow of the document and have the freedom to put something in it's place!
Float
Using the ‘float’ attribute allows users to position the box of an element horizontally either to the right - ‘float:right’ - or to the left - ‘float:left’.
The vertical position of the element is as it would be in the normal flow of the document - you could consider the place in the code where you insert your floated element as the vertical anchor of that element, which is then displaced in the horizontal direction that you set it to.
Any inline content (inline boxes) surrounding the floated box flows around the floated element - so the normal flow of the document is affected/displaced by the floated element..
So, floated elements affect other elements in the normal flow - that is, they will displace other inline boxes in the normal flow. As we will see below, this is different than with absolutely positioned elements, as absolutely positioned elements, which by definition are not part of normal flow, will not displace elements of the normal flow, but rather overlap them.
Relative Positioning
An element that has ‘position:relative’ is positioned relative to its own unpositioned location in the normal flow - that is, it will be moved the distance that you specify using either ‘top’ ‘right’ ‘bottom’ or ‘left’ from it’s unpositioned location in the normal flow.
The object still affects the normal flow, but not at its offset position: the area it would have occupied if it hadn't been positioned is what is affected.
As a simple example, imagine two divs, one right after the other in your code so that they appear in your document as one ‘box’ on top of the other:
<div>Some text here</div>
<div>Some more text here</div>
<div>Even more text here</div>
<div>Yet even more text here</div>
With respect to ‘normal flow’, the text from these divs should appear as four lines vertically stacked one after the other in your document. But, if you set the second div to ‘position: relative; top: -20px;’, the second div will then shift twenty pixels towards the top of the page, relative to where it would have appeared in the normal flow, and a space would remain where it would have been had we not moved it 20 pixels upwards.
Any excellent example of the ‘power’ of ‘position: relative’ can be found here [webmasterworld.com].
Absolute Positioning
An element that has ‘position: absolute’ or ‘position: fixed’ is removed from the normal flow and does not affect normal flow.
Absolutely positioned elements are positioned according to their container block (the block level element that contains them). What is important to note here is that while the containing block of a fixed-position element is the viewport, the containing block of an absolute-positioned element is defined as its closest positioned ancestor - meaning the closest element, outside of itself, that has ‘position: absolute, relative, or fixed’. So, in the simplest case, if there are no other ‘positioned’ elements, the ‘closest positioned ancestor’ then becomes the viewport.
Elements that are set as ‘position: fixed’ are positioned relative to the viewport, and they do not scroll with the webpage.
Bugs
We all know that browsers are buggy, and there are certainly CSS-P bugs out there. While we gather them all up, here’s a good place to start learning about buggy behavior:
<snip>
[edited by: Nick_W at 3:19 pm (utc) on June 1, 2003]
[edited by: mipapage at 4:20 pm (utc) on June 1, 2003]
Only with position: fixed or position: absolute do you remove an element from the normal flow of the document...
I'm don't think this is correct. The CSS2 spec [w3.org] specifically says that float elements are not in the normal flow of the document. This is important to know because it affects how CSS selectors will be applied to the float.
Other than that, this is a great introduction to CSS positioning. Nice work, mipapage!
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for the floated box. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.
The behavior had me fooled. Thanks for pointing that out!
So: Floated elements are not in the normal flow, but they affect line (inline) boxes that they are next to.
Normal page flow? Let's call it "normal page flow with exceptions."
Page flow itself is a misleading term in that "flow" can occur in virtually any HTML container, whether the <body></body> element or within a child <div>, a positioned <div> or <blockquote>. There are lots of possibilities
Page flow itself is a misleading term in that "flow" can occur in virtually any HTML container,
Would that then be child container flow? :-]
Those are the intricacies that I didn't want to get into with this one. I suppose that I could have, and that we still can, it's just the bugs you find here and there are intimidating (make that - a pain in the butt to explain) as can be all of the explaining that needs to be done as we don't have images here.
I think that little cut and paste code snippets might be a cool way to go about it - for example the 'position:relative' up there could'a been done as a snippet...
[edited by: mipapage at 10:49 pm (utc) on June 1, 2003]
Understanding the fine points is crucial for effective use of floats.
And those fine points would be...?
Even with IE's limitations, there remains quite a list of practical float applications. Be creative. Look to the possibilities.
Here's an example of absolute positioning relative to the top left corner of a div:
div#container {
width: 100%;
height: 100px;
border: 1px solid red;
}
p#p1 {
position: relative;
top: 50px;
left: 50px;
}
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<div id="container">
<p id="p1">Positioned element</p>
</div>
I really don't want to spend any more money on useless books. Nobody does...
