Fixed positioning is like absolute positioning, except that it positions an element relative to the browser window. Like absolute positioning, it removes an element from the normal flow of elements without leaving behind the space for it, so that it no longer influences the positions of other elements, which simply flow normally underneath as if it is not there. Unlike in absolute positioning, when a page is scrolled up and down, the fixed position element remains in the same place. To specify that an element should be fixed positioned, fixed is used as the value of the position property and the top or bottom and the left or right properties are used to specify where to place the element relative to the edges of the browser window. Figure 12.8 and 12.9 show how the properties are used and the effect.
Notice that the result is similar to Figure 12.7. The h{} rule fixed positions the <h2> element lOpx from the top and 50px from the left edges of the <html> element. Again, the background color has been added to make it easier to see the layering of the elements.
1. An Application of Fixed Positioning
This fixed method of element positioning is sometimes used for the header or left sidebar to present permanently visible navigation. However, if not used properly, this can create side-effects which make a design difficult to use. For example, a design that looks fine on a standard screen may, on a smaller screen, have the sidebar cut off or footer content obscured when the page is scrolled that far down. Figures 12.10 and 12.11 demonstrate an application of fixed positioning that fixes the sidebar. The . sidebar{} rule specifies the dimensions, color, and position of the sidebar, as well as margin. The .content{} rule specifies the dimensions of the container for the sidebar and the paragraphs of text, as well as the space between the sidebar and the paragraphs and how to handle overflow.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.