Using the fixed-top and fixed-bottom helper classes, elements can be fixed to the top or bottom of the page respectively. This is achieved by setting the position property to fixed, clearing the element’s left, right, and top (or bottom in the case of fixed-bottom), and increasing the z-index to ensure that the element appears in front of all the other elements on the page. Looking at the Bootstrap style sheet, we see that fixed-top and fixed-bottom are defined as follows:
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
}
The sticky-top class is similar to fixed-top, with the exception that the element only gets positioned to the top of the page after the user scrolls past the element. The helper class achieves this by doing the following:
- Setting the position property to sticky.
- Setting the top of the element to 0.
- Setting the z-index to 1020 in order to ensure that the element appears in front of all the other elements on the page.
The z-index master list found in _variables.scss is also noteworthy:
// Z-index master list
//
// Warning: Avoid customizing these values. They’re used for a bird’s eye view
// of components dependent on the z-axis and are designed to all work together.
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.