Nuclear css position properties
Position
Specifies the type of positioning method used for an element.
static
- Elements render in order, as they appear in the document flow.absolute
- The element is positioned relative to its first positioned (not static) ancestor element.fixed
- The element is positioned relative to the browser window.relative
- The element is positioned relative to its normal position.
Note: If "position:static", the top, right, bottom and left properties have no effect. Note: A "positioned" element is one whose position is anything except static. Note: If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
content
Position adjustments
top
- Sets the top edge position in px, cm, etc.right
- Sets the right edge position in px, cm, etc.bottom
- Sets the bottom edge position in px, cm, etc.left
- Sets the left edge position in px, cm, etc.
Note: Negative values are allowed.
content
Floats
Specifies whether or not a box (an element) should float.
none
- The element is not floated, this is default.left
- The element floats to the left.right
- The element floats the right.
Note: Absolutely positioned elements ignores the float property!
left right
Clear
Specifies which sides elements are not allowed to float.
none
- Default. Allows floating elements on both sides.left
- No floating elements allowed on the left side.right
- No floating elements allowed on the right side.both
- No floating elements allowed on either the left or the right side.
left right
Clearfix
Fixes broken layouts when children are only floating elements.
left right
Z index
Specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
auto
- Sets the stack order equal to its parents. This is default.number
- Sets the stack order of the element. Negative numbers are allowed.
Note: z-index
only works on positioned elements not position: static
.
front back
Variables