CSS Fixed Position

Position

jquery-logo 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.

Summary

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.

CSS Relative Position

Position

jquery-logo With CSS relative position, the element still affects the document flow, but it can be offset, or “nudged” around from its original location. The element will appear to have been moved visually, but its effect on the DOM remains the same.

Changing the visual location of an HTML element is a common front-end web development task. The challenge is in choosing which tool should be used to accomplish this task. By “tool”, I mean which CSS property best suits the outcome you hope to have? Now, while the position property is quite often the go-to tool for this task, sometimes it can be confusing as to which CSS position property to apply. For example, absolute is similar to fixed.
But then again, absolute is sometimes confused with relative because of the ability to apply “top”, “right”, “bottom” and “left” properties to your rule set.

Just keep in mind that the confusion that surrounds absolute and relative position is mostly related to document flow. With absolute position, you are removing the element from the document flow, which is neither good nor bad; it’s just a big feature of absolute position. So, if you feel that absolute position is the tool you need, look HERE.

If you want to change the visual location of an element, yet keep it in the document flow, then CSS relative position is what you need. The element will still have the exact same physical effect on the DOM. That is to say: the other elements around it still think it is exactly where they expect it to be. But, from a purely visual standpoint, the element can be moved.

Example # 1

See the Pen CSS Relative Position Basics | Front End Video by Front End Video (@frontendvideo) on CodePen.

In Example # 1, we have three nested elements with the following classes applied: “child“, “parent” and “grand-parent“. From now on, let’s use those class names to refer to the elements. Each element has a specific CSS background-color property set, so that it is easier to identify.

The child element has its CSS position property set to:  “relative“. It also has its CSS top and left properties set to 100px and 50px. This tells the browser: “offset this element 100px from the top and 50px from the left of where it should normally be in document flow. As a result, the child element appears pushed down 100px and pushed right 50px.

Example # 2

See the Pen CSS Relative Position – Intermediate 2 | Front End Video by Front End Video (@frontendvideo) on CodePen.

In Example # 2, we’ve added five black boxes that are siblings of the child element. They do not have position relative set, so they appear exactly where we expect them to be in the document flow. Let’s call each of these five black boxes child.black.

Notice that although our child.green box appears pushed down and pushed right, the child.black boxes are not pushed down. It may seem as though they should, since the child.green box should push them down. This is because using position relative to “nudge” an element around only has a visual effect on the DOM; it does not affect the document flow. So, all of the child.black boxes still feel as if the child.green box is exactly where they expect it to be in the DOM. The “nudging around” aspect of using position relative is purely visual.

Example # 3

See the Pen CSS Relative Position – Intermediate | Front End Video by Front End Video (@frontendvideo) on CodePen.

In Example # 3, we have added position: relative to the fourth child.black box by using the CSS nth-child selector: .child.black:nth-child(4). This box is white, with a purple border. We have set it to be offset 10px from the top and 80px from the left of where it should normally be in the document flow. Just as is the case with child.green, the “nudging” is purely visual; the two child.black boxes below are not affected by this and appear as if this white box with the purple border is still were it should be in the DOM.