8 replies [Last post]
euio
Offline
Enthusiast
Last seen: 15 years 18 weeks ago
Timezone: GMT+8
Joined: 2005-03-03
Posts: 71
Points: 0

why does a parent div have to be set to position:relative before you can set the position of child div to absolute???

say...

#parent {width:500px; margin 0 auto; [color=red]position:relative[/color]}
#child {width:50px; position:absolute; [color=brown]top:20px; left: 30px[/color]}

<div id="parent">
<div id="child">
</div>
</div>

note that top:20px; left: 30px will show an output with which the child container is 20px from the top side of the parent and 30px from the left side of the parent...

AND

what are the limitations or disadvantages of absolute positioning provided that im designing a fixed width table?

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

a WHY question... and limitations?

It doesn't ! using position absolute is not dictated by the use of position relative.

An absolute positioned div takes it's position from it's nearest positioned parent, in lieu of any such positioned divs it will default to taking it's position from the html root element/viewport. therefore if you wish it to take it's position from within a specific parent div you set that parent to be positioned which means relative.

Try and avoid the use of table layout if at all possible.
With absolute positioning remember the most important fact that they are removed from the flow of the page use them but use them sparingly and not to layout major div elements.

Hugo.

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

euio
Offline
Enthusiast
Last seen: 15 years 18 weeks ago
Timezone: GMT+8
Joined: 2005-03-03
Posts: 71
Points: 0

a WHY question... and limitations?

based on my encounter... i the child kept moving 30px from the left side of the browser instead of the parent's.<--- that is without the parent being relatively positioned... but when i typed in the position:relative in parent, the child moved just 30px from the left of the parent...hmmm ill try a simpler experiment... Smile and be back!

euio
Offline
Enthusiast
Last seen: 15 years 18 weeks ago
Timezone: GMT+8
Joined: 2005-03-03
Posts: 71
Points: 0

a WHY question... and limitations?

hmm Sad that's still my conclusion

<html>
<head>

<style type="text/css">
#parent {position:relative;width:300px;height:500px; margin:40px auto; border:1px solid;}
#child {position:absolute; left: 50px; top:40px;border:1px solid red; width: 20px;height:20px;} 
</style>

</head>

<body>
<div id="parent">
<div id="child">

</div>
</div>
</body>
</html>

try the code and remove the position:relative of the parent and ull see the the child moving out of the parent element to position itself 50px from left of window and 40px top of the window...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

a WHY question... and limitations?

thats exactly right.

position absolute will postion the element exactly within the current positioning context. the initial positioning context is the browser window.

if none of the element's ancestors establish a new positioning context, top, left, bottom & right, width and height will all work based on the browser window.

to establish a new positioning context you have an element must have a position of absolute or relative (or possibly fixed). The default value is static and that doesn't create a new positioning context.

so when you give the parent div a position of relative, you are establishing a new positioning context, 0,0 in that context is the top/left corner of that div.

euio
Offline
Enthusiast
Last seen: 15 years 18 weeks ago
Timezone: GMT+8
Joined: 2005-03-03
Posts: 71
Points: 0

a WHY question... and limitations?

Thanks a lot it's crystal clear to me now! Laughing out loud Laughing out loud Laughing out loud

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

a WHY question... and limitations?

Thanks for clarifying what I wrote chris :roll:

Clearly I write in tongues, or perhaps I'm just using invisible ink :? 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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 20 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

a WHY question... and limitations?

The Reverand Mister Hugo wrote:
Clearly I write in tongues…
religion will do that to you. Tongue :roll:

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

a WHY question... and limitations?

Our Lord Protector of the faith Gary, wrote:
religion will do that to you


Verily do you speak the truth, my son , my ministry falls on deaf ears
I shall have to start injecting some Hellfire into my sermons.

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