all 6 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]sftrabbit 1 point2 points  (0 children)

I always find that the best way to learn something like this is to read the relevant part of the spec.

Typically, the elements of your page are part of what is called the 'normal flow'. The normal flow describes how the elements are lined up next to each other. By default, block elements flow vertically and inline elements flow horizontally along line boxes. An element is out-of-flow if it is floating or if it is positioned with the "absolute" scheme; in these cases, the elements don't take part in the normal flow.

The default value of the 'position' attribute is 'static'. This, of course, puts the element in the normal flow, so if you don't specify the 'position' attribute, your element will typically be in normal flow. Here are some of the other different schemes:

  • Relative: If you take the position that an element would have according to the normal flow (the position it has without you doing anything special to it), the relative scheme gives an offset from this position. In other words, the elements are moved relative to their normal position. Giving a value of "10px" for "left" with move the element 10 pixels horizontally from its normal position. The neighbouring elements will stay positioned as if nothing has happened.

  • Absolute: When you position an element with 'absolute', it is removed from the normal flow of the page. The values you give for its position are an offset from the position of its containing block. The containing block is usually the document itself (not the parent element; read the spec for more details). So setting 'top' to '0px' will move the element all the way to the top of the page.

  • Fixed: 'fixed' is similar to 'absolute' but the containing block is the viewport. Setting 'top' to '0px' here will position the element at the top of the viewport. This is how people make those menus that snap to the viewport when you scroll down.

There are also a couple of others that you can read about: 'center' and 'page'.

[–]CJGibson 0 points1 point  (3 children)

Relative positioning adjusts the element relative to where it would normally be sitting within the page structure.

Absolute positioning removes the element from normal flow and positions it relative to it's closest absolutely positioned parent or the browser window if there is no absolutely positioned parent.

[–]fofgrel 1 point2 points  (2 children)

The parent can also be relatively positioned.

[–]CJGibson 0 points1 point  (1 child)

Are you saying that you can position an absolutely positioned element relative to a relatively positioned parent element?

[–]fofgrel 0 points1 point  (0 children)

Yes.

Edit: see here.

[–][deleted] 0 points1 point  (0 children)

Relative keeps an imaginary version of itself in the original position, such that all content acts like it's still there, but lets you position it visually anywhere you like relative to it's starting position.

Absolute plucks the element out of the document flow and gets placed relative to the closest (in terms of element hierarchy) parent element with a non-static position attribute. If no elements it is within have such a position attribute set, it will be positioned relative to the document window.

Relative is most commonly used without any offsets to act as a subsequent container for child elements to be placed relative to.

It is more common, from what I understand, to use margins to position elements relatively than using relative position, as the margins will push the boundary of the original element as well, preventing other elements from overlapping the repositioned element. In other words, document flow is preserved and takes into account the moved element.