confused about CSS and positioning

Wed Jul 7 09:10:25 EDT 2004

Hi,

When I use absolute positioning with CSS to, for example, position an element at the top of the screen, I frequently need to position all other elements around it. I wish to avoid elements overlaying each other. The relative elements overlap with the absolutely positioned element. Can this be avoided?

At the end of this email is a snippet of HTML which when displayed in a browser will show the problem.The red bordered div lies over the absolutely positioned blue bordered div. How do I make the red bordered div display beneath the blue bordered div while keeping the blue bordered div's position absolute.

Also, is it true that top, right, bottom and left parameters cannot be set for relatively positioned eleements?

Any ideas would be much appreciated.

Regards
John

<html>
<head>
<title></title>

<style>
.absoluteposition
{
position:absolute;
top:0px;
border:red solid blue;
}

div
{
position:relative;
border:red solid thin;
width:100%;
}

</style>

</head>

<body>

<div class="absoluteposition">
<h1>This is the top of screen</h1>
<p>
Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah  blah blah blah blah blah blah blah blah blah.
</div>

<!--Relatively positioned div with red border-->

<div>
<h2>This should be below previous heading</h2>
</div>

</body>
</html>
#####################################################################################

This email has been scanned by MailMarshal, an email content filter. 
Hosted by Galway County Council   
#####################################################################################