CSS Absolute Positioning

Absolute positioning in CSS allows you to position elements in HTML in a specific place on a website. Elements can be positioned using top, right, bottom and left properties using positive or negative CSS units such as px or em. Normally, HTML elements on a page are always positioned statically from top to bottom.

With absolute positioning each element that is positioned will be fixed in the place defined no matter what the resolution of the screen is or what the size of the browser window is.

Using absolute positioning can be frustrating if you don’t understand how it all works or what it is but it is a very powerful CSS property once you get to grips with it and can really help in your website design“>website design.

In this article I will be taking you through the steps to create a web page with absolute positioning and a working demo with the full source code.

Creating The Web Page

I created a simple page with a background image, simple header and navigation at the top, an image below and text underneath that. Download source images

Click here to see the page

HTML Code

<div id="wrapper">
<div id="headwrap">
<div id="header"></div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="image"><img src="images/image.jpg" alt="#" /></div>
</div>
<div id="main">
<h1>Seasons Greetings</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium quam vel tortor pulvinar
bibendum ut et tellus. Phasellus vehicula ligula eu lorem iaculis eu convallis dolor mollis. Integer ac
magna vel sem posuere rutrum. Pellentesque nisl turpis, placerat id blandit in, consequat sed tortor.
Mauris eget velit leo. Fusce vel facilisis sem. In tellus arcu, consectetur in ultrices a, molestie egestas
libero. Nam et augue ipsum. Sed rutrum laoreet lacus eget congue. Pellentesque nibh urna, laoreet
eget lacinia at, aliquam a arcu. In malesuada dapibus tempus. Ut porttitor nibh ac purus hendrerit ac
facilisis purus dignissim. Vestibulum sagittis gravida laoreet. Phasellus in justo vel ligula venenatis
sollicitudin. Quisque lectus lectus, elementum vel dictum non, pellentesque et sapien. Quisque
fermentum ultrices arcu, at placerat augue consectetur nec. Mauris faucibus volutpat lorem, et aliquam
purus aliquam aliquet. Nullam tristique, nisl et porta pretium, sapien mi mollis dui, fringilla suscipit tortor
lectus at ipsum. </p>
</div>
</div>

CSS Code

* { margin: 0px; padding: 0px; }

body { background: url(images/bg.jpg) no-repeat; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; font-size: 62.5%; }

#wrapper { width: 663px; margin: 0 auto; }

/* Fonts */

h1 { font-size: 2.0em; color: #990000; padding: 10px 0 0 10px; }

p { font-size: 1.2em; color: #333333; padding: 20px 5px 0 10px; line-height: 22px; }

/* Header */

#headwrap { width: 663px; height: 382px; }

#header { background: url(images/header.jpg) no-repeat; height: 120px; width: 663px; }

/* Navigation */

#nav { height: 45px; width: 500px; float: right; background: url(images/nav.jpg) repeat-x; padding-bottom: 10px; }

#nav ul { line-height: 45px; font-size: 1.2em; padding-left: 8px; }

#nav li { list-style-type: none; display: inline; }

#nav li a { display: block; text-decoration: none; height: 45px; outline: none; color: #fff; float: left; padding: 0 30px; text-align: center; }

#nav li a:hover { display: block; height: 45px; background: url(images/hover.jpg) repeat-x; }

/* Image */

#image { width: 663px; height: 207px; float: left; }

/* Main Content */

#main { width: 663px; background-color: #f2e8ce; margin: 0 auto; margin-top: 10px; float: left; }

To see what Google sees when looking at a website, you can turn off the styles in your browser. You will notice that the navigation and image appear before the H1 and main content.

Absolute Positioning

Now we will add absolute positioning to the CSS code as follows:

#headwrap { position: absolute; top: 0; width: 663px; height: 382px; }
#main { position: absolute; top: 382px; width: 663px; background-color: #f2e8ce; margin: 0 auto; margin-top: 10px; float: left; }

When you have added the positioning to the CSS code you will need to select everything in the headwrap div and place it under the closing div of the main content.

Your code will now look like this:

<div id="wrapper">
<div id="main">
<h1>Seasons Greetings</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium quam vel tortor pulvinar
bibendum ut et tellus. Phasellus vehicula ligula eu lorem iaculis eu convallis dolor mollis. Integer ac
magna vel sem posuere rutrum. Pellentesque nisl turpis, placerat id blandit in, consequat sed tortor.
Mauris eget velit leo. Fusce vel facilisis sem. In tellus arcu, consectetur in ultrices a, molestie egestas
libero. Nam et augue ipsum. Sed rutrum laoreet lacus eget congue. Pellentesque nibh urna, laoreet
eget lacinia at, aliquam a arcu. In malesuada dapibus tempus. Ut porttitor nibh ac purus hendrerit ac
facilisis purus dignissim. Vestibulum sagittis gravida laoreet. Phasellus in justo vel ligula venenatis
sollicitudin. Quisque lectus lectus, elementum vel dictum non, pellentesque et sapien. Quisque
fermentum ultrices arcu, at placerat augue consectetur nec. Mauris faucibus volutpat lorem, et aliquam
purus aliquam aliquet. Nullam tristique, nisl et porta pretium, sapien mi mollis dui, fringilla suscipit tortor
lectus at ipsum. </p>
</div>
<div id="headwrap">
<div id="header"></div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="image"><img src="images/image.jpg" alt="#" /></div>
</div>
</div>

Click here to see the absolute positioned page

As you can see the page looks exactly as the same as it did before but if you disable all styles you will notice that the H1 and main text is positioned above the image and navigation.

The advantage of positioning the H1 and text before the image and navigation is so that Google will see those first when it crawls the page and therefore it will greatly improve the ranking of the website.

I’ve been interested in web design for a while and I went to university to study a degree in media and graphics. While at university I developed my design skills using Adobe Photoshop, Flash, Dreamweaver and Adobe After Effects.

Visit Authors Website

Tags: Absolute Positioning, CSS, HTML, Tutorial

This entry was posted on Wednesday, January 6th, 2010 at 2:54 pm and is filed under CSS, Tutorials, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.