Be the first user to complete this post

  • 0
Add to List



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.
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]
Check out James Williamson's excellent tutorial on Fixed Positioning !

Also Read:

  1. How to set a box shadow on left or right only or just on a single slide
  2. Getting the parameters and arguments of a javascript function
  3. Applying floats and clearfix to block elements
  4. css - align text to an image vertically
  5. Using css3 calc in an attribute value to compute its value at runtime