Position
In all the exercises we've considered so far, elements have been positioned on the page according to the order in which they appear in the HTML document. Placement by order in the document is considered to be normal flow. This module is concerned with various ways of customizing the look of pages by making exceptions to normal flow. Such situations might occur when we wish to move tangential information, such as a figure, to the side of the text content, or to have the text flow around a list of hyperlinks.

Moving a figure to the side

Text flowing around a list
We will consider three ways of adjusting the position of elements:
- Using the position property to push elements outside of normal flow.
- Using the float and clear properties to control the placement of elements on the same line.
- Using flexible box layout to position elements within a container.
The position property
The position property (position
) is used to specify where to position an element with respect to normal flow. In choosing any value other than the first, you run the risk of having the element overlap with other elements.
static
places the element with respect to normal flow. This is the default value used when none is specified.absolute
takes an element outside of normal flow. Elements positioned in the normal flow will be placed as if that element were not present.relative
places an element relative to where it would have been placed in the normal flow.fixed
places an element in a fixed position with respect to what can be viewed in the browser window, so everything else will move when the document is scrolled.
For each of these, positions can be specified using the top property (top
), the right property (right
), the bottom property (bottom
), and the left property (left
). For example, the following could be used to place the element with IDAn attribute specifying a unique identifier for an element. topleft
in the top left corner of the page. Notice that no units are provided when the values are 0.
#topleft {
position: absolute;
top: 0;
left: 0;
}