CSS Positioning Classes     

There are CSS classes supplied by Quasar to help you position a DOM element easily:

Class NameDescription
fullscreenFix position covering all window real-estate
fixedSet position to fixed without specifying top, left, right or bottom properties
fixed-centerSet position to fixed but in the middle of window.
absoluteSet position to absolute without specifying top, left, right or bottom properties
absolute-centerSet position to absolute but in the middle of the container (container needs relative position).
fixed-top, absolute-topFixed or absolute position to top of screen
fixed-right, absolute-rightFixed or absolute position to the right edge of screen
fixed-bottom, absolute-bottomFixed or absolute position to bottom of screen
fixed-left, absolute-leftFixed or absolute position to the left edge of screen
fixed-top-left, absolute-top-leftFixed or absolute position to top left of screen
fixed-top-right, absolute-top-rightFixed or absolute position to top right of screen
fixed-bottom-left, absolute-bottom-leftFixed or absolute position to bottom left of screen
fixed-bottom-right, absolute-bottom-rightFixed or absolute position to bottom right of screen
relative-positionSet position to relative

Alignment

Class NameDescription
float-leftFloat to the left
float-rightFloat to the right
on-leftSets a small margin to the right; commonly used for icon elements with other siblings
on-rightSets a small margin to the left; commonly used for icon elements with other siblings

Vertical alignment:

Class NameDescription
vertical-topSet CSS vertical alignment to top
vertical-middleSet CSS vertical alignment to middle
vertical-bottomSet CSS vertical alignment to bottom
Visibility Other Helper Classes
Last updated: Sat May 19 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub