How to use position fixed in CSS

CSS, HTML5, Web Design

Sometimes on a webpage, you’ll want a part of it to never leave the screen.  No matter how much you scroll up or down, you’ll want that piece of the page to always be in the same spot.  For that, we use a CSS position property called fixed.  To have this work we will need to create the HTML first like so:

<div class=”fixedPosition”>I am not going to move</div>

<div style=”height:1200px;”>I make the page scroll</div>

Here we have a div tag with some text inside of it.  It also has the class called “fixedPosition” which we will use later in the CSS to select the div.  We also have another div that is 1200px tall.  We are using this div to make the page scroll.  With a div that tall, the page will scroll up and down and we’ll be able to see the result of the fixed position.

Now add this CSS in a style tag in the head tag or an external CSS style sheet:

.fixedPosition{

position:fixed;

top:200px;

right:50px;

}

This CSS applies the fixed position and tells the div to be 200px from the top and 50px from the right.  After you save the page you’ll see that the fixedPosition div is positioned where we told it to and as you scroll up and down it will not move.

Position fixed is very useful for nav bars, contact buttons, live chat links, etc.  If there’s anything on the page you don’t want to ever leave, then use position fixed.  If you want to learn more be sure to check out our HTML5/CSS3 training.  Have an amazing day!