CSS Positioning

The CSS position property is used to determine what kind of positioning we want to use for the container (or element). It can help you manipulate the location of an element.


Values

Static:
Instructs an element to remain in its default position and this position cannot be modified by the values of the sides and depth (i.e. top, left, right, bottom).

Relative:
The positioning context of an element that uses relative positioning is provided by its default position. An element’s original position remains in the flow of the document, just like the static value, but this can be modified by the values of the sides and depth.

Absolute: Absolute positioning allows us to remove a container from the context of the other elements around it and position it wherever we want on the page. The element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it. There has to be a relatively positioned parent element containing an “absolute” positioned child element

Fixed: Just like absolutely positioned elements, the element is removed from the flow of the document. They behave in almost the same way, only that fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling. See fixed positioning used in the header's styling on mobnia's homepage

inherit: The position value doesn’t cascade, so this value can be used to specifically force it to inherit the positioning value from its parent.

There’s no universal set of coordinates to guide placement, even when you ’re using the absolute positioning value. Each time a block is positioned on the page with a position setting other than static, it creates for its descendants a new positioning context in which the upper left corner of its content area has the coordinates (0,0). So, if you use CSS to position an element within that block, its position will be calculated relative to that new coordinate system —its “positioning context.” ...HTML Utopia: Designing Without Tables Using CSS By Rachel Andrew and Dan Shafer

Jide Adebiyi

User Interface designer.

Subscribe to Mobnia

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!