By default HTML elements are positioned in the page using the HTML flow algorithm. You can find a detailed discussion in the MDN Documentation
. However, you may want to override this and manually position elements, which you can do with the CSS properties
The Positioning Context
First, we need to understand the positioning context, this is basically the area an element is positioned within. The
bottom properties affect where an element appears within its context.
You can think of the context as a box. The
left property determines how far the element is from the left side of this context, the
top from the top,
right from the right, and
bottom from the bottom. These values can be numeric or percentage values, and can be negative.
If you define both a
right value, only the
left value will be used. Similarly, if both
bottom are supplied, only
top is used. Use the
height properties in conjunction with the positioning rules if you want to control the element’s dimensions.
What constitutes the positioning context depends on the elements
position property, which we’ll discuss next.
The Position Property
position property can be one of several values:
position value is
static. It positions the element where it would normally be in the flow and ignores any
position value of
relative keeps the element where it would normally be in the flow, just like
static. However, the
bottom properties move the element relative to this position - in effect, the positioning context is the hole the element would have filled with
position property the value of
absolute removes the element from the flow. Other statically positioned elements will be laid out as though the absolutely positioned element was never there. The positioning context for an absolutely positioned element is its first non-statically positioned ancestor, or (if there is none), the viewport.
A common CSS trick is to create a relatively-positioned element, and then absolutely position its children.
Assigning the value of
fixed to the
position property also removes the element from the flow. However, its positioning context is always the viewport. Moreover, if the page is scrolled, a fixed-position element stays in the same spot (an absolutely-positioned element will scroll with the page). This makes fixed position elements useful for dialogs, pop-ups, and the like.
By default, elements are drawn in the browser in the order they appear in the HTML. Thus, if we position an element further down the page, it may be covered up by succeeding elements. The
z-index property provides us with a fix. The default value for the
z-index is 0. Items with a larger
z-index are drawn later.