Be the first user to complete this post Login To Mark Completed

0

Add to List Add To List..(Max 5) Close Save

position:fixed

Overview

To design and understand the page layouts, we need to understand the position property in css. An element is said to be positioned, when its position attribute is set.

 position : relative || absolute || fixed || sticky (experimental);

The default value for the position attribute is static.

This post is one of the posts in the series of posts to understand the position attribute in css. Make sure to read all of them to fully understand the position attribute.

• position:relative
• position:absolute

An element on DOM can be categorized in one of the following categories :

• position : static || relative - element is in the normal document flow.
• position : absolute || fixed - element is absolutely positioned.
• float : left || right - element is floating. Learn More about floats.

---

Getting started

• Allows you to position an element on the document.
• Keeps the element fixed at its position irrespective of DOM status.

In the below example, I will demonstrate twitter type fixed navigation bar. You might have noticed that in twitter when you scroll the top navigation bar remains fixed. It does not change with the scrolling event. In this example, I will show demo the simple version of that kind of navigation bar. My navigation bar has HOME written to it. In the paragraph below I have MDN description of position keyword. To introduce the scroll bar I have set its height to 1000px. Also, I have used css reset to reset overwrite the browser's default styling. You can notice that the text goes behind the navigation bar because of the z-index set on the navigation bar. The most important thing to notice is that the navigation bar is fixed at its position irrespective of scroll. [codepen_embed height="268" theme_id="0" slug_hash="obLpVZ" default_tab="result" user="kavitshah8"]See the Pen Sticky positioned navbar by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]

---

---

---

---

Also Read:

1. box-sizing
2. pseudo elements vs pseudo classes
3. Applying floats to inline elements
4. es6 iterators and iterables - creating custom iterators
5. Promise javascript examples

---