3 replies [Last post]
andyReimer
Offline
newbie
Last seen: 18 years 12 weeks ago
Joined: 2004-09-08
Posts: 2
Points: 0

I've got a div that acts as a container to center my site in the browser window. I was under the impression that absolute positioning would place things a set number of pixles from the top and left of its parent object (as apposed to the window). Perhaps I don't understand the idea of parent object well enough. For instance....

<div id="sectionA">
<div id="sectionB">
<p> some stuff goes here</p>
</div>
</div>

.... in this example, if I use absolute positioning on the <p> would it not be drawn a set number of pixles from the top an left of sectionB?

On the site that I'm working on I seem only to get things to work by using relative positioning, not absolute. Here are some examples.

http://www3.telus.net/apreimer/relative.html
http://www3.telus.net/apreimer/absolute.html

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

absolute positioning problem

Hi andyReimer,
the positioned element will be positioned from the nearest containing positioned element.
So the parent that is positioned relative or absolute.
Know matter how I write this it never seems clear Smile

In your absolute positioned example, the tagline is contained by the header which does not have position set to either absolute or relative.
So the tagline sits where it should.

Do you really need all the negative top values?

Hope that helps

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 14 years 36 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

absolute positioning problem

In order to have an element be positioned absolutely inside another element, the position attribute of the parent element must be set to relative:

e.g

.section b {
  position: relative;
}
.para {
  position: absolute;
  left: 120px;
  top: 10px;
}

...


<div class="sectionb">
  <p class="para">Some text here</p>
</div>

That should postion the <p> element 120px left and 10px from the top of the sectionb div.

This article at Alistapart has some information on positioning absolutely positioned elements inside relatively positioned boxes.

Hope it helps Smile

I am Dan, Dan I am.

andyReimer
Offline
newbie
Last seen: 18 years 12 weeks ago
Joined: 2004-09-08
Posts: 2
Points: 0

Thanks

Thanks a bunch. Its all very clear now, but I just never could find that information it the tutorials I was looking at.

As for the negative top values, that was me using relative positioning to work around the problem that you've now cleared up for me.

thaks again.