Roots
Back

CSS Positioning

Position

position: absolute / fixed / relative / static;

absolute - Position the element relative to its containing element.
fixed - Position the element relative to the browser window - fixed elements will not scroll with the rest of the page.
relative - Position the element relative to its normal position.
static - Position the element normally, ignoring any specifications for top etc.

Left

left: value / percentage;

value - The number of pixels to move the element left, from the left edge of its containing element. Negative values are allowed, and will result in an offset to the right of the left edge of the containing element.
percentage - The space to offset the element from the left, as a percentage of the width of its containing element.

You can also write similar code for the right, top and bottom;

Right

right: value / percentage;

Top

top: value / percentage;

Bottom

bottom: value / percentage;

Float

float: left / right;

left - The element will float to the left hand side of the parent element, with other content in that element wrapping around it.
right - The element will float to the right hand side of the parent element, with content wrapping around it.

Clear

clear: left / right / both;

left - No floating elements will be allowed on the left hand side of the current element.
right - No floating elements will be allowed on the right hand side of the current element.
both - No floating elements will be allowed on either side of the current element.

Vertical Align

vertical-align: baseline / sub / super / top / text-top / middle / bottom / text-bottom / value / percentage;

baseline - The element is positioned on the baseline of the line it is on.
sub - The element is positioned as though it were subscript. Note this does not change the size.
super - The element is positioned as though it were superscript. Note this does not change the size.
top - The top of the element is aligned with the top of the tallest element on its line.
text-top - The top of the element is aligned with the top of the font on the line it is on.
middle - The element is positioned in the middle (top-to-bottom, not left-to-right) of the line it is on.
bottom - The bottom of the element is aligned with the bottom of the lowest element on its line.
text-bottom - The bottom of the element is aligned with the bottom of the font on the line it is on.
value - Raise the element from its baseline by the given number of pixels.
percentage - Raise the element from its baseline by a percentage of the height of the line it is on.

Z-Index

z-index: value;

value - A whole number, specifying the element's position above or below other elements. The element with the largest positive number will appear closest to the user, and the element with the largest neagtive number (or smallest positive number) will appear furthest away.