With CSS fixed position, the element is completely removed from the document flow, but positioned absolutely in relation to the view-port. You can then use the “top”, “bottom”, “left” and “right” properties to specify the exact location in which you want it.
Sometimes you may need to place an element in an exact position. That is, you don’t want to be tied to the natural document flow. Following the natural document flow is often the best way to go, and it is important to keep that in mind. But when you want to take an element out of the document flow and set it at an exact location in relation to the view port, position fixed is the tool for the job.
Fixed position is often confused with absolute position, but while their behavior is somewhat similar, they are not exactly the same thing. It’s important to note here, that with absolute position, the relationship between the HTML element and its descendants matters. For a detailed discussion on absolute position, CLICK HERE.
With fixed position, there is no concern about the relationship between the HTML element and its descendants. The HTML element that you apply to fixed position is completely removed from the document flow and placed relative to the viewport. That is, this element cares only about where the viewport is. It is as if its descendants simply do not exist; it does not know about them or care about them. And once you’ve set the position to fixed, you can use the “top”, “right”, “bottom” or “left” properties to further refine the visual location of the fixed position element. In other words, these top, right, bottom and left properties allow you to specify how the fixed position element is offset from the viewport.
Example # 1
See the Pen CSS Fixed Absolute Demo | Front End Video by Front End Video (@frontendvideo) on CodePen.
In Example # 1, the element with the class “child” has its CSS position property set to “fixed“. As a result, the element is completely removed from the document flow and positioned absolutely in relation to the view-port. Since there is quite a bit of text in the page, you must scroll in order to see all of it. Notice that as you scroll, the .child element stays put and does not move with the scroll. The reason that the .child element appears at the top is because its top property is set to 0. This is one of the most popular uses for position:fixed; that is, creating a page header that does not move when you scroll.
Example # 2
See the Pen CSS Position Fixed Demo | Front End Video by Front End Video (@frontendvideo) on CodePen.
Example # 2 is mostly identical to Example # 1. The only difference is that the .child element’s top:0 property has been changed to: bottom: 0. As a result, the element is fixed to the bottom of the view-port. Notice how when you scroll, the .child element does not move away from the bottom. This is usually the technique used when you see a custom footer that stays set to the bottom of the page and does not move.
So, with fixed position, an HTML element is completely removed from the document flow. There is no concern about the descendants of that element because it is positioned relative to the viewport. Then the “top”, “right”, “bottom” and “left” properties can be used to “nudge” the element further, which means that you can determine how the element is “fixed” to the viewport and where it should appear.