CSS – dotnetable

Fixed position page elements is achieved by using absolute positioning. What I will be demonstrating here is how to fix an element to the side of the page that contains a clickable button area.

The first thing is to create a DIV, give it an appropriate name and then position it as required. It doesn’t have to be a DIV it could be an image tag or something else. Here it is a DIV because it will be a parent to hold multiple elements.

Here is the CSS that positions the DIV element.

#FixedRight
{
    background:transparent url(../images/FixedButtonRight.png) no-repeat scroll 0px 0px;
    height:315px;
    width:30px;
    position:fixed;
    top:100px;
    right:0;
    z-index:2000;
}

Firstly we set an image as the background and set the height and width to fit the image. Next set the position as fixed and specify the required position. the z-index is used to specify the stack order of elements on the page, a higher value items appear in front of lower value items.

Once we have the container in place we can add a clickable area for triggering actions, We can use an anchor tag for the clickable area. After adding an anchor tag the html will look like this:

<div id="FixedRight"></div>

In this demo the background image used on the DIV has a red and a blue area. We can now add CSS styling to define the anchor position and size to make the blue area appear as clickable.

#FixedRight a
{
    display:block;
    height:155px;
    width:30px;
    margin-top:160px;
}

Using the block value on the display style causes the element to take up the full width available, in this case 30 pixels (the block value also puts a new line before and after the element). A top margin has been added so the anchor does not sit at the top of the DIV.

Things to watch

In this demo the location of the images relative to the location of the pages needs to be considered. Due to the relative path to the image in the CSS, the images will not display on a page contained in a site sub folder.

That is the basic principle behind fixed page elements and fixed buttons. I have uploaded an app demonstrating this technique with elements fixed to both the left and right of the browser window. Of course it is not the only way to do it and as I mentioned before, it is not limited to DIV elements.

You can get a demo application containing the code from Github here

Share this: