The Absolutely-Positioned Div

An absolutely-positioned div lives up to its name. It is positioned to a fixed point within its container, and it cannot move from this position. When you draw a div with the Dreamweaver Draw Layer tool, this is the type of div you are adding to your page. The top and left declarations specify where an absolutely-positioned div appears on a page. You can also use the bottom and right properties to position an element, but this may prove to be buggy and is not something I recommend.

An absolutely-positioned div is said to be removed from the document flow. This means the position of an absolutely-positioned div is not affected by any other page elements, though it may cover up or be covered by other elements, it is very much an entity to itself. Take a look at Listing 1 below, add the CSS in Listing 1 to a new page, and save the page with a name of your choice. As I mentioned at the beginning of this tutorial, remember to add the code in within the head tags of the page and to wrap it within style tags.

Note: One often asked question in the newsgroups when folks are learning about positional CSS is, “Why do my divs – Layers in Dreamweaver speak – move?” Often this is an illusion, what users really see is a percentage width table moving behind an absolutely-positioned div. The Dreamweaver Draw Layer tool inserts absolutely-positioned divs. There is so much more to designing with CSS than absolutely-positioned divs. Hopefully this tutorial will help you grasp some of those concepts. The Relevant CSS panel (keyboard shortcut F9) as shown below in Figure 1, gives you quick and easy access to change the values as you work along with this tutorial. The properties appear in the left column and the values appear in the right column. You may prefer to type your CSS directly by hand. That’s fine also.

Figure 1. Changing the position values in the Relevant CSS Panel

#blue {
 width: 100px;
 height: 100px;
 position: absolute;
 top: 0;
 left: 0;
 background-color: blue;
 } 
  

Listing 1. Defining an absolutely-positioned div

Take a look at the above code line by line.

1. #blue – The # in front of the selector declares this is an ID selector
2. width: 100px; – The div will be 100 pixels wide
3. height: 100px; – The div will be 100 pixels high
4. position: absolute; – The div will be absolutely positioned based on the top and left property values
5. top: 0; – The div will be positioned 0 units from the top edge of the browser window
6. left: 0; – The div will be positioned 0 units from the left edge of the browser window
7. background-color: blue; – The background color of the div will be blue

I have given the div a height value. It is often a good idea to leave height undeclared for your div so it can expand and contract to suit the content it may hold. Content could fluctuate due to the user resizing text, or you may be using your div for dynamic data that varies from record to record. These are two examples of instances where a height declaration may be a problem.

To insert the div into your page, use the syntax shown below.

<div id="blue"></div>  

You have no need to add any content to the div for this tutorial. You are simply going to insert the div into your page and see how it reacts to the different values you are going to place on the position property. Add the code from Listing 2 between the body tags in your page and preview it in your browser of choice.

Listing 2. Adding the div into your page

Figure 2. The absolutely-positioned div

If you look at Figure 2, you can see that the div has taken on the form you declared in your CSS. The div, as you know, is absolutely positioned. I mentioned earlier, an absolutely-positioned div is placed out of the document flow. This means that it remains unaffected by other elements on the page. Modify this now by adding an <h1> element to the page. Once you’ve have done that, you will be able to see how the two elements—the div and and the h1— interact with each other.

Alter the code in your page to look like listing 3 below. Add an <h1> to the code. There is no need to style it for this demonstration.

<h1>This is an h1 title</h1>
 <div id="blue"></div>  

Listing 3. Adding the h1 element

Previewing the page should give you the results you can see in figure 3 below.

Figure 3. The blue absolutely-positioned div and the h1 element

As you can see, the absolutely-positioned div has not had any bearing on the h1 element. The h1 element occupies the position you would expect, and the div has also correctly assumed its position.

Try changing the order of the two elements in the code so that the h1 element appears below the div. Preview the page again once you have made the changes. You will see that the position of the elements in the code has no effect on the way the browser displays them. The reason for this is the nature of the behavior of an absolutely-positioned div. Once the positioning value has been declared as absolute, it is removed from the flow of the page. An absolutely-positioned div will remain in the position it is placed—based on its top and left property values—within its containing element. You can think of an absolutely-positioned div as being on a higher plane than page level. They act as if they are stacked above the page.