Fixed position items in a website are very common. They are found in most websites that have any sort of social media integration. Designers create feedback buttons so that visitors can fill out a contact form, or they place social media icons so that visitors can promote their articles or their website through Facebook, Twitter, LinkedIn, and many other social media sites.

The main point of a fixed position element is to have it stay in the exact same place on a website, whether the browser window is small, the user scrolls down the page, or if they move throughout the content. This gives the user access to these options no matter where they are on the site.

You can make any element fixed position. You can make a div, a class, an active element, and just about anything else have a fixed position. Here is the HTML from the example:



The Code

I didn't include the code for the menu, since that was covered in a previous tutorial, but I did include the code for the container div, so that you could see how the feedback icon interacts with the site relative to the container.


#container {
width:960px;
height:650px;
margin:auto;
margin-top:0px;
}
#feedback a{
background:url(feedback.jpg) no-repeat;
width:45px;
height:200px;
position:fixed;
right:0px;
top:125px;
}
#feedback a:hover{
background:url(feedbackhover.jpg) no-repeat;
width:45px;
height:200px;
position:fixed;
right:0px;
top:125px;

The result of our CSS is shown below. If you are coding a link element, then be sure to style the active and the hover state, so that your element doesn't move when you hover over it.

One thing that you should make note of is that you have to specify what position the element will take. After specifying with CSS that an element has a fixed position, you have to specify how far the object is from the top or bottom, and then the left or the right. If you want an object to be flush against the edge of any side of the browser, you would set the value to 0px.

If we change the CSS property called "right" from 0px to 50px, then the feedback icon shifts so that it is 50px from the right edge of the browser. See the example below: