Thu, 2006-11-09 20:59
Greetings,
I'm reading from a book on CSS and the author is talking about Absolute positioning of block elements. I understand that if you absolutely position an element on a page, you take it out of the natural flow of the page and that things that appear after this element move up to take it's place in the natural flow. (Whereas relatively positioned elements have their placeholder held for them in the normal document flow.)
But then he mentions that if you set a "top" and "left" property for this absolutely positioned element, the element moves with respect to it's "top ancestor container in the markup" which in his example is the Body tag.
So, my question is this. If i have a div within my body tag and that div is called #container, and the container has left and right margins of auto to center it on the page. If i place a paragraph of text within that #container and position it absolutely with both top and left settings to 100px, will that paragraph of text be positioned 100px down and to the right of the top corner of the browser window (where the body tag starts) or positioned from the top left corner of the #container, which is centered on the page?
Based on the author's writing, i think the "top" ancestor would still be the body tag and what I really want is the paragraph to be "relative" to the containing div. So should I use relative positioning to make the paragraph look to the nearest upper level ancestor?
Many thanks for clearing this up!
Enjoy the day,
Pedro
Thu, 2006-11-09 21:08
#1
More research leads to an answer
I've found that (in my previous example) if i set the positioning of #container to "relative" and the positioning of the paragraph to "absolute", the paragraph of text is now positioned according to where the #container is on the page.... which is exactly what i wanted.
So, is there a way to accomplish all of this without changing an elements positioning? I think I could do it via margins or padding, but any other ideas?
Thanks!
Thu, 2006-11-09 21:30
#2
No this is how you set a
No this is how you set a context for an absolutely positioned element it needs a reference point, this is the first ancestor of the element that has a positioning context if none do then it's body which always in effect has a positioning context. position relative sets a new context.
Thu, 2006-11-09 21:44
#3
Hugo, Thanks for your
Hugo,
Thanks for your comments. Isn't that what I was saying in my second post? That by setting the container to relative, it becomes the first ancestor with a contextual position? And therefore the paragraph becomes positioned based on the container?
I thought that's what i was trying to say, but could you help me to understand why your description is different?
Thanks again,
Pete
Fri, 2006-11-10 01:45
#4
'No' was in response to your
'No' was in response to your final paragraph, positioning is how you determine where absolute takes it's reference from, I wasn't contradicting your understanding but your quest to find a way around this, my tone was one of puzzlement 
Fri, 2006-11-10 11:09
#5
I know Hugo has clarified
I know Hugo has clarified what he meant, but just to answer your question:
sheikyerbouti wrote:
By setting the container to relative, it becomes the first ancestor with a contextual position? And therefore the paragraph becomes positioned based on the container?
Yes.
Fri, 2006-11-17 21:32
#6
Thanks to both of you for
Thanks to both of you for double-clarifying. Now, as i go back and read what I wrote, I can see you were answering the second portion. All is clear!
Thanks for the help!
Pete
Sat, 2006-11-18 12:59
#7
Glad you understood
Glad you understood it.
Absolute positioning will start from the topmost element, which in most cases will be the body tag.
By setting the parent element to relative positioning, the AP child then takes it's coordinates from the parent, not the body.