confused about CSS and positioning

Wed Jul 7 10:09:27 EDT 2004

The issue is that absolutely positioned elements are "removed from the
document flow" -- in other words, the rest of the document is laid out as if
they don't exist, whether that results in them appearing on top of each
other or whatever.  This is a reduced case, so it's hard to tell what effect
you are looking for, but if the idea is to have the "absoluteposition" div
at the top with no white space around it, it makes more sense to get rid of
the body's top margin and padding, and maybe also the div's top margin and
padding.  You won't need to position either of the divs to have them just
flow normally with the second below the first.

I've found Eric Meyer's Cascading Style Sheets: The Definitive Guide (2nd
ed., O'Reilly), to be very helpful for this kind of problem.

- Kevin

Kevin Broun
Senior Web Developer
National Cancer Institute

-----Original Message-----
From: John Fitzgibbon [mailto:jfitzgibbon at Galwaylibrary.ie]
Sent: Wednesday, July 07, 2004 9:43 AM
To: Multiple recipients of list
Subject: [WEB4LIB] confused about CSS and positioning

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   
############################################################################
#########