Skip to main content

Pivotal UI

v18.1.0
Modifiers / Positioning

Positioning

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

Classes

ModifierPurpose
display-blockSets display: block on element
display-flexSets display: flex on element
display-inlineSets display: inline on element
display-inline-blockSets display: inline-block on element
display-noneSets display: none on element
float-leftFloats content to the left
float-rightFloats content to the right
position-absoluteSets position: absolute on element
position-fixedSets position: fixed on element
position-relativeSets position: relative on element
Floats
floating left
floating right
not floating
Position Absolute
Parent element
Child element
Position Relative
Parent element
Child element
Position Fixed
This example places a green box in the bottom-right corner of this page.
I am fixed!
Display Flex
child1
child2
child3
Display Block
This span tag takes up all available width
Display Inline
This div tag takes up only the space it needs
Display Inline-Block
This div tag takes up a fixed amount of space (600px)
Display None
The div below this text has been hidden with the "display-none" class.

Imports

Import CSS:

import 'pivotal-ui/css/positioning';