Positioning
The AppBar allows you to set its Position and its Position mode.
Position
The Position
option of the AppBar defines where the component has to be positioned on the page. The available position options are:
-
None
—No positioning CSS styles are applied. -
Top
—Places the AppBar at the top of the page. -
Bottom
—Places the AppBar at the bottom of the page.
Position Mode
The PositionMode
option defines the position of the component relative to its parent container or viewport. The predefined position modes are:
-
Static
—Positions the AppBar according to the normal flow of the page. -
Sticky
—Sticks the AppBar to a given position (top or bottom). -
Fixed
—Positions the AppBar relative to the viewport.
To use the
Sticky
orFixed
position mode of the AppBar, thePosition
has to be set either toTop
orBottom
.