In this, the sixth tutorial in the beginning CSS series, we are going to look at positioning our page elements with CSS. We will investigate the use of margins, and the positional properties of absolute, relative, and static. The aim of this tutorial is not to get overly complex or complicated; we just want to get these options buttoned down and understood. Hopefully this tutorial will give you the boost you may be looking for to experiment, and to discover more about positioning elements with CSS for yourself.
The first five tutorials in this series can be found at the links below:
If you're a Dreamweaver user and have not really investigated using positional CSS, then you are most likely familiar with AP—Absolutely Positioned—divs, or "layers" in Dreamweaver speak. The term layers is incorrect; these are in fact divs, or divisions. We will start in the correct manner by calling these elements by their correct name—albeit abbreviated—and refer to them as divs. We will not be using the Dreamweaver "Draw Layer" tool in this tutorial, we will be coding our CSS by hand. With that said, let's make a start by taking a look AP divs, and how they interact with other elements on our page.
Remember all the CSS in this tutorial series is shown without
the style tags and should be placed in the head of your page. Just above the
closing </head> tag would be ideal for our purposes. In a "production" page
you should be placing your CSS in an external style sheet.
<style type="text/css">
<!--
Our CSS sits in here
-->
</style>
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 Dreamweaver's Draw Layer tool, this is the type of div you are adding to your page. An AP div is positioned on a page wherever the top and left declarations tell it to be. You can also use the bottom and right properties to position an element, although this may prove to be buggy and is not something I would recommend.
An AP div is said to be removed from the normal document flow. This means the position of an AP 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. Let's take a look at Listing 1. Add the CSS we see there into a new page, and save the page with a name of your choice.
#blue {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background-color: blue;
}
Listing 1: Defining an Absolutely Positioned div
Let's take a look at the above code line by line.
I have given our div a height value. It is often a good idea to not declare a height for your div so it can expand and contract to suit the content it may hold. Content could fluctuate due to text resizing by the end user, 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 our div into our page, we use the syntax shown below. We have no need to add any content to the div for this tutorial. We are simply going to insert the div into our page, and see how it reacts to the different values we 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.
<div id="blue"></div>
Listing 2: Adding the div into our page
Image 1: Our AP div
If you look at Image 1, you can see that our div has taken on the form we declared in our CSS. The div, as you know, is absolutely positioned. We mentioned earlier that an absolutely positioned div is placed out of the document flow. This means that it remains unaffected by other elements on our page. We'll look at this now by adding an <h1> element to our page. Once we have done that, we will be able to see how the two elements—our div and and our h1— interact with each other.
Alter the code in your page to look like Listing 3. As you can see, I have added 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 see in Image 2.
Image 2: Our blue AP div and the h1 element
As you can see, our AP div has not had any bearing on our h1 element. The h1 element is occupying the position we 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. This is simply the nature of the behaviour 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—in accordance with its top and left property values—within its containing element. You can think of an AP div as being on a higher plane than page level. They act as if they are stacked above the page.
In this section of the tutorial we will move on to relative positioning. We'll begin by making a change or two to our CSS, and then we will see how the relatively positioned element interacts with other elements on our page. Change the CSS in your page to read like that shown in Listing 4.
#blue {
width: 100px;
height: 100px;
position: relative;
background-color: blue;
}
Listing 4: Setting the CSS on our blue div to {position: relative;}
Leave the h1 element below the div in your code. Once you have made the changes to your CSS, you can preview the page in your browser.
Image 3: Our blue div relatively positioned
You will notice that there is quite a bit of difference between the behaviour of the AP div and our new relatively positioned one. We can clearly see that the h1 element has been pushed down the page by our div. A relatively positioned div is said to be in the document flow. As such, our blue div will now occupy space at the page level, and its existence will have an effect on surrounding elements.
To prove a point, reverse the order of the elements in the code, just as we did earlier, so the h1 element appears above our relatively positioned div in the source. Preview your page in the browser.
Image 4: With the elements reversed in the code
With the code order reversed, the elements are reversed when displayed by the browser. From this we can see that the order the elements appear in our code is important when using relatively positioned divs.
When we changed the CSS to display a relatively positioned div, we also removed the top and left property declarations. Let's add them back in and see what happens to our div when these settings are used. Alter your CSS to look like Listing 5.
#blue {
width: 100px;
height: 100px;
top: 0;
left: 0;
position: relative;
background-color: blue;
margin: 0;
}
h1 {
border: 1px solid #000;
margin: 0;
}
Listing 5: Zeroing our margins and adding a border to the h1 element
In the last tutorial, we talked about using background colours and borders to de-bug a layout, to provide something we can see when we need to discover what is going on on our page, or even just exactly how far our elements extend. Well, I'm following that advice here. I've added a border to the h1 element and zeroed the margins on both elements. This will enable me to easily see what the reaction is when I make some subtle changes to our blue div in a moment. You may want to do the same.
Image 5: Everything set to zero
With the alterations to our CSS in place, we can preview our page in our browser. As you can see in Image 5, we have a nice clean starting point - perfect! However, before we move on any further, have you noticed anything different in the behaviour of the relatively positioned div to that shown by the absolutely positioned div? If not take a look at Image 6, where I have put them side by side.
Image 6: Relative and Absolute positioning. Both divs
are set at top 0 & left 0
Notice the way the absolutely positioned div has taken it's position in relation to the containing element, the body in this case. The relatively positioned div has taken its positional values relative to the h1 element it follows in the source. These are two very different behaviours that are clearly seen in Image 6. Also notice that the AP div is not restricted by page margins and is tight against the browser chrome.
The relatively positioned div reacts quite differently to the default body margins. As our relative div is within the flow of the page, it is affected by the margins on the body. Try adding a new rule to zero the body margins and watch the relatively positioned div slide to the left edge of your page. It cannot, of course, go tight to the top of the page, as it will be constrained by the h1 element that is "in the way." The h1 will also move due to the margin zeroing.
Note: Opera browsers use a default padding on the body element instead of the default margin that IE and Gecko-based browsers do. If you are using Opera to experiment with this tutorial, you will need to zero the padding to get the div and h1 elements to move up next to the browser chrome in the relatively positioned example.
Both our relative and absolutely positioned divs will respond to margin settings, including negative values. Try increasing and decreasing the margin values, as we did with our paragraphs in Part 5 of this series. Once you have tried making adjustments with margin values, try adding top and left declarations to your relatively positioned div. You will see this div also responds to those values. The div is still positioned relative to the h1 element, unlike the AP div which is positioned with respect to its container. We can see a screen grab of our relatively positioned div using top and left property values of 50px, in Image 7, below. (The body margins have not been zeroed in the example image.)
Image 7: Relatively positioned, top: 50px; left: 50px;
In the final section of this tutorial, we will take a look at the position: static; declaration. Change your CSS so it reflects the values shown in Listing 6.
#blue {
width: 100px;
height: 100px;
top: 0;
left: 0;
position: static;
background-color: blue;
}
h1 {
border: 1px solid #000;
margin: 0;
}
Listing 6: Declaring our div as a static div
With the CSS set as above, preview your page in your browser. It will look very much like our relative div did, as we can see in Image 8.
Image 8: Our div now has a static value
Let's change our top and left property values to 100px so we can test the reaction of our div. When you have made those changes, preview the page in your browser. You should see no change at all. The static value of the position property does not respond to the top and left properties. Let's try this again, except this time we'll remove the top and left properties, and add new margin properties of margin-top: 50px; and margin-left: 50px; as shown in Listing 7.
#blue {
width: 100px;
height: 100px;
position: static;
background-color: blue;
margin-top: 50px;
margin-left: 50px;
}
h1 {
border: 1px solid #000;
margin: 0;
}
Listing 7: Setting the margins on the static div
When you have completed that, preview your page one more time. You should see something very similar to that shown in Image 9.
Image 9: Using margins on a static div
As you can see from Image 9, our static div responds just fine to margin settings. The values for these margins are calculated against the h1 element and the body margin/padding, in the same way as they would be with the relative div. The static div is also said to be in the flow of the page, which means its position is affected by surrounding elements. To demonstrate this, we can add a new declaration into our h1 rule. Add the margin-top property as shown in Listing 8.
#blue {
width: 100px;
height: 100px;
position: static;
background-color: blue;
margin-top: 50px;
margin-left: 50px;
}
h1 {
border: 1px solid #000;
margin: 0;
margin-top: 100px;
}
Listing 8: Adding a top margin to our h1 element
With this change made, preview your page in the browser. Your results should be as shown in Image 10.
Image 10: Adding a top margin to the h1 element
Notice how the top margin has pushed down the h1 element. Our div, however, has maintained its positional relationship with the h1 - it is still 50px below the h1 element.
That concludes this tutorial. We have taken our first look at positioning elements within our page using CSS. We have investigated the position property and some of the values it has, absolute, relative, and static. We have also looked at how margins can affect the position of elements within our page. We have looked at what is meant by elements being in or out of the page flow.
This tutorial is by no means exhaustive. It was never meant to be, and I'm sure you realise that. This tutorial was simply aimed at giving you an insight into positional CSS, and I hope it achieved that for you.
Until next time :~)
Approximate download size: 228k
Keywords
box, div, positioning, relative, absolute, static, container, body border, background, color, colour
