FloatingActionButton Positioning
The FloatingActionButton component provides options for positioning in relation to the browser viewport or a CSS containing block. The positionMode property defines the positioning context, while the align and alignOffset properties place the button and fine-tune its distance from the edges.
Position Mode
The FloatingActionButton can be positioned in one of two ways, depending on positionMode:
fixed(Default)—Positions the FloatingActionButton relative to the viewport. It stays in the same place when the page scrolls.absolute—Positions the FloatingActionButton relative to the nearest positioned ancestor. If no positioned ancestor exists, the browser uses the page's initial containing block, and the button moves with page scrolling.
To position the FloatingActionButton relative to a specific area in absolute mode, render it inside that area and set a CSS position value, such as relative, on the area. The nearest positioned ancestor defines the containing block.
The following demo lets you compare fixed and absolute positioning while the page scrolls.
Alignment
Use align to set the FloatingActionButton's horizontal and vertical position within the active positioning context.
The horizontal setting defines the possible horizontal alignment of the FloatingActionButton and provides the following options:
start—Uses the start point of the container.center—Uses the center point of the container.end(Default)—Uses the end point of the container.
The vertical setting defines the possible vertical alignment of the FloatingActionButton and provides the following options:
top—Uses the top point of the container.middle—Uses the middle point of the container.bottom(Default)—Uses the bottom point of the container.
Centering the FloatingActionButton in both dimensions is not a typical use case. Still, you can adjust a centered position with offsets. Setting
horizontal: 'center'andvertical: 'middle'at the same time is not supported.
The following demo displays the supported horizontal and vertical alignment points.
Offset
The FloatingActionButton allows you to use alignOffset to adjust the position set by align.
The available offset keys are:
x—Sets the horizontal offset.y—Sets the vertical offset.
For edge alignments, the default offset places the button 16 pixels from the container boundary. When an axis uses center or middle, an omitted offset places the button at 50% on that axis. A supplied value moves the button from the center.
For corner alignments, positive offsets move the button inward from its edges. At bottom-center, positive x moves the button right, and positive y moves it up. Negative offsets reverse those directions and can move the button beyond the container boundary.
The following demo lets you change the horizontal and vertical offsets in pixels.