Fixed positioning in CSS allows you to extract sections of the document, remove them from the natural document flow and make them blatantly visible so that they don’t scroll around with the rest of the document.

Working of Fixed Positioning

Fixed positioning was a common feature introduced in CSS2. You are only allowed to use absolute and relative, values in fixed positioning, to create complex layouts in the documents. Fixed value and absolute value work in a similar way, with one stark difference. The positioned block’s containing block is defined by viewport. An absolutely positioned block will be well removed from the normal document flow and positioned relative to either the canvas or its nearest ancestor element.

Now you should note the difference between canvas and viewport. While a canvas is a large flat space on which the document is rendered and the viewport is a bit in the browser’s window, where the document mainly occurs. In case the canvas is bigger than the viewport, only a segment of the canvas will be visible at a time, and the browser will usually allow you to scroll around the document using a scroll bar or something similar to it.

In case of fixed positioning, you can take an element and position it not just outside the document flow, but also outside the canvas, and simply attach it to the viewport. This means that the element will not scroll with the rest of the document, but remain visible all the time. This effect is essential for things like a table of contents or a list of navigational links, and generally people also use frames.

A list of six CSS properties is essential to positioning elements – the first group includes four properties – top, bottom, left and right. The second group includes two properties of width and height.

There is a difference between the first and second group – top, bottom, left and right – sets the distance between edges of containing block and outer or margin edge of the element [space between the contents, border, margin and padding], while the width and height sets the difference between the content or inner edge of the element.

In order to position an element, you need to supply at least any two of these properties in every dimension. For example, if you want to horizontally position the navigation element to occupy the entire width of the viewport, we can either set left to 0 and width to 100% or set left to 0 and right to 0. The default values of all these properties is auto which means that the browser will position the element according to those properties that had been set explicitly and scale one of the ones left as “auto” to fit the elements into the available space.