CSS positioning utilities for Basscss
npm install basscss-position
This module includes basic positioning utilities to alter the default document flow.
Use positions with caution. They are often unnecessary and commonly misused.
Use .relative to create a new stacking context.
``html`
Hamburger
Use .absolute to move elements out of the default document flow.
`html`
Use .fixed to position an element relative to the viewport. Fixed positioning is notoriously tricky to use well and can lead to inaccessible content and unwanted side effects. Use fixed positioning with caution.
`html`
Hamburger
Note: fixed positioning has been disabled here for demonstration only.
To anchor to a particular side, use .top-0, .right-0, .bottom-0, or .left-0. Margin and padding utilities can be used to space elements apart.
`html`
Hamburger
To fill an entire width or height, use opposing directions.
`html`
Fixed bar
To ensure the desired stacking order, use z-index utilities.
`html``
Fixed bar