Positioning

Use the positioning modifiers to control the CSS display, float, and position properties.

Classes

Modifier	Purpose
display-block	Sets display: block on element
display-flex	Sets display: flex on element
display-inline	Sets display: inline on element
display-inline-block	Sets display: inline-block on element
display-none	Sets display: none on element
float-left	Floats content to the left
float-right	Floats content to the right
position-absolute	Sets position: absolute on element
position-fixed	Sets position: fixed on element
position-relative	Sets position: relative on element

floating left

floating right

not floating

Parent element

Child element

Parent element

Child element

This example places a green box in the bottom-right corner of this page.

I am fixed!

child1

child2

child3

This span tag takes up all available width

This div tag takes up only the space it needs

This div tag takes up a fixed amount of space (600px)

The div below this text has been hidden with the "display-none" class.

This div is hidden!

Imports

Import CSS:

import 'pivotal-ui/css/positioning';