7 replies [Last post]
sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 13 years 43 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

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

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 13 years 43 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

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!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 13 years 43 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

'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 Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 13 years 43 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies