CSS Framework

Position


To modify and element's position, choose a position type and a position value.



Position Types


  • .static
  • .relative
  • .absolute
  • .fixed


Position Values


  • .top-*
  • .right-*
  • .bottom-*
  • .left-*


Value Scale


  • -2(-2 rem)
  • -1(-1 rem)
  • 0(0 rem)
  • 1(1 rem)
  • 2(2 rem)


Static


Static is the default position of an element. The .top, .right, .bottom, and .left properties have no effect.


.static




Relative


Relative positioning offsets an element from it's normal position in the normal document flow.


.relative .top-2



.relative .right-2



.relative .bottom-2



.relative .left-2




Absolute


Absolute positioning removes an element from the normal document flow and positions it relative to its closest positioned ancestor. Therefore, an element's ancestor must have a position other than static for this to work. Otherwise, the element is positioned relative to the root <html> element.


.relative

.absolute .top-2



.relative

.absolute .right-2



.relative


.absolute .bottom-2



.relative

.absolute .left-2





Fixed


Fixed positioning removes an element from the normal document flow and fixes it to the viewport with respect to the main <html> element. Note that the position values must be set to display the element. Notice the element 'fixed' to the bottom right portion of the screen.


.fixed .bottom-0 .right-0