CSS Positioning

From Exterior Memory
Jump to: navigation, search

CSS has three main properties to control the lay-out of block elements: display, position, and float. The formal specification is available at CSS 2.1 visual formatting model. Here are some excerpts.

Summary

CSS provides many options to control the flow of text within a page. Bellow are the most common options.

CSS Effect
display: none Not shown.
display: inline Part of the current line. Can contain wrap with line breaks.
display: block Rectangle, positioned in between other blocks.
display: flex Flex container, whose children are flex items. Used for adaptive web designs.
float: left Rectangle, moved to the left or right. The rest of the text flows around it.
position: absolute Rectangle, placed over the text, positioned relative to the containing box.
position: fixed Rectangle, placed over the text, positioned relative to window viewpart or printed page (does not move while scrolling).

Display

A page is build up of many elements, where each element is displayed as a box. Elements can contain elements, and boxes are also hierarchical. Most elements form boxes, others are applied along with the rest of the text flow. There are two major block types:

block
A rectangular box containing other elements.
inline
A inline style that wraps along with the text flow.
none
The element is not shown.

For example, a body element can contain a table element which contains a tr which contains a td element which contains a p element which contains a b element. This is rendered as a p box in a td box in a table box in body box.

You can modify the type of an element by setting the display property in CSS:

span, b, em   { display: inline; }
div, p, table { display: block; }
.hidden       { display: none; }

Besides these main display types, there are some others. It is recommended that you stick to block, inline, none, and flex, unless you know what you are doing.

flex
Create a flex container. CSS Flexible Box Layout was added to CSS in 2013, and is not yet supported by all browsers. See Dive into Flexbox for a comprehensive tutorial.
list-item, table
similar to block element, with a inline element inside. Basically, it will behave as a block.
run-in
similar to an inline element, but with an page break before.
inline-block, inline-table
similar to an inline element with a block element inside. So it is always a rectangle, and is placed in the regular flow if it will fit on the same line, otherwise it is placed on a new line. Unlike a regular block, it does not have to take the full width of the parent box.
table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption
Rectangular block boxes that are taken out of the regular text flow. If you want to accomplish this, better use a block display combined with a specific positioning.

Positioning

The position property only applies to block items. It can be used to take an element out of the regular flow and either use absolute positioning or offset a box. It can have the following values:

static
The box is a normal box, laid out according to the normal flow. The 'left' and 'top' properties do not apply.
relative
The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.
absolute
The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins. Warning: not all parent blocks are containing blocks
fixed
The box's position is calculated according to the 'absolute' model, but the box is not positioned according to the containing block, but according to the media. In the case of continuous media, the box is fixed with respect to the viewport (and doesn't move when scrolled). In the case of paged media, the box is fixed with respect to the page, even if that page is seen through a viewport (in the case of a print-preview, for example).

Containing Blocks

An absolute positioned block is positioned according to its containing block.

However, not all parent blocks are containing blocks.

Only other relative, absolute or fixed blocks can be containing blocks. Static blocks are not containing blocks. To make a block the base reference for absolute positioned blocks, mark it as relative:

<div style="position: relative; left: 0px; top:0px">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p>Lorem ipsum <div style="position: absolute; left:10px; top>Overlay</div> dolor sit amet</p>
</div>

In the above example, the text "Overlay" is positioned according to the parent div, not according to the p, despite that p is it's parent block.

Impact on Display and Float Parameters

If you specify a position parameter, it may override the display and float parameters:

Value of Position Containing Block? Flow Display parameter Float parameter
static No normal flow unchanged unchanged
relative Yes normal flow unchanged unchanged
absolute Yes outside normal flow set to block set to none
fixed Yes outside normal flow set to block set to none

Float

A float is a box that is shifted to the left or right on the current line. While it is first taken out of the text flow, the text will flow around the float (unlike static and fixed boxes). Floats are ideal to position illustrations in a text.

none
The default. The box is placed between the other boxes.
left
The box is placed on the left side of the parent box, and the text flows around it.
right
The box is placed on the right side of the parent box, and the text flows around it.

If you want to make sure that a new block is placed beneath a float, you can use the clear parameter. This is useful to make sure that a header (title) starts on a full-width line.

<img style="float:left" src="image.png"/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<h1 style="clear:left">New Section</h1>

Overflow

A parent box is often resized if its content is too large to fit the parent box. However, for absoluted and fixed positioned boxes, it is possible to explicitly set the height of the parent box. In such cases, the overflow parameter controls what to do with the overflowing content:

visible
The overflown text is is printed outside the parent box.
hidden
The text is clipped, it is not shown.
auto
If the content is too large, a scrollbar is shown If it fits, no scroll bar is shown.
scroll
A scrollbar is always shown, even if the contents fits.

Z-index

In case of overlapping content (e.g. for absolute and fixed positioning and for overflow text), the z-index determines which element is shown on top. By default, all elements have z-index: 0, but it can be brought to the front with a higher z-index. If two elements have the same z-index, the last defined elements if printed on top.

More Information

External references: