Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

position:fixed

Overview

To design and under­stand the page lay­outs, we need to under­stand the posi­tion prop­erty in css. An ele­ment is said to be posi­tioned, when its posi­tion attribute is set.

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

The default value for the posi­tion attribute is sta­tic.

This post is one of the posts in the series of posts to under­stand the posi­tion attribute in css. Make sure to read all of them to fully under­stand the posi­tion attribute.

An ele­ment on DOM can be cat­e­go­rized in one of the fol­low­ing categories :

  • posi­tion : sta­tic || rel­a­tive — ele­ment is in the nor­mal doc­u­ment flow.
  • posi­tion : absolute || fixed — ele­ment is absolutely positioned.
  • float : left || right — ele­ment is float­ing. Learn More about floats.

Get­ting started

  • Allows you to posi­tion an ele­ment on the document.
  • Keeps the ele­ment fixed at its posi­tion irre­spec­tive of DOM status.

In the below exam­ple, I will demon­strate twit­ter type fixed nav­i­ga­tion bar. You might have noticed that in twit­ter when you scroll the top nav­i­ga­tion bar remains fixed. It does not change with the scrolling event.

In this exam­ple, I will show demo the sim­ple ver­sion of that kind of nav­i­ga­tion bar. My nav­i­ga­tion bar has HOME writ­ten to it. In the para­graph below I have MDN descrip­tion of posi­tion key­word. To intro­duce the scroll bar I have set its height to 1000px. Also, I have used css reset to reset over­write the browser’s default styling. You can notice that the text goes behind the nav­i­ga­tion bar because of the z-index set on the nav­i­ga­tion bar. The most impor­tant thing to notice is that the nav­i­ga­tion bar is fixed at its posi­tion irre­spec­tive of scroll.

See the Pen Sticky posi­tioned navbar by Kavit Shah (@kavitshah8) on Code­Pen.


Check out James Williamson’s excel­lent tuto­r­ial on Fixed Positioning !

You may also like...