Sent by Simon Willison on 15 August 2002 17:05
At 17:38 15/08/2002 +0100, Peter Bowyer wrote:
>Hi,
>
>I'm having a job getting absolute positioning to work properly. Please
>look at http://www.hatcourses.co.uk/courses.html and see where the bright
>green "Courses" header is. It is the correct distance from the left, but
>it should be 10px above the bottom of the horizontal blue box at the top
>of the page (see http://www.hatcourses.co.uk/images/screenshot.gif for
>where exactly it should be).
>
>The CSS used on the header is:
>.header H1 {
> position: absolute;
> bottom: 10px;
> margin: 0;
> padding: 0;
> color: Lime;
> margin-left: 250px;
> font-size: 300%;
> font-family: "Trebuchet MS";
>}
>
>As you can see the header is inside another class, so I thought it should
>position itself relative to this parent div, which is what it isn't doing
>for me.
position: absolute only positions things relative to the nearest parent
block that is itself positioned using either position: absolute or
position: relative (or if it can't find one it positions things relative to
the browser document / window which is what is happening in your case).
Just add position: relative to your .header class definition and it should
work fine:
.header {
height: 156px;
background-color: #9CF;
position: relative;
}
Cheers,
Simon Willison
http://www.bath.ac.uk/~cs1spw/blog/
