Quasar CSS Positioning Classes     

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

Class NameDescription
float-left/pull-leftFloat to the left
float-right/pull-rightFloat to the right
fullscreenFix position covering all window real-estate
fixedSet position to fixed without specifying top, left, right or bottom properties
absoluteSet position to absolute without specifying top, left, right or bottom properties
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-left/pull-leftFloat to the left
float-right/pull-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 vertical alignment to top
vertical-middleSet vertical alignment to middle
vertical-bottomSet vertical alignment to bottom