Topic: Absolute position DIVs in DIVs (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=24026" title="Pages that link to Topic: Absolute position DIVs in DIVs (Page 1 of 1)" rel="nofollow" >Topic: Absolute position DIVs in DIVs <span class="small">(Page 1 of 1)</span>\

 
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 11-14-2004 02:36

Hello,
Just need to confirm something, and that is a DIV within a DIV is effectively a parent child relationship... absolute positioning of the child DIV is relevant to the parent DIV?

SO:

<div id="parent" style="height:200px; width:200px;>

<div id="child" style="position:absolute; right:25px; bottom:25px;>-bottom right-</div>

</div>

The above child div would appear in the bottom right of the parent div, or do we run into browser compatability issues and this can't be trusted?

Thanks, Karl..

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted posted 11-14-2004 02:53

The position of the child DIV is absolute from the the parent IF the parent specify that its own position:absolute;. In you example it would be :

code:
<div id="parent" style="position:absolute; width:200px; height:200px;">
<div id="child" style="position:absolute; right:25px; bottom:25px;">-bottom right-</div>
</div>

And don't forget the closing " when specifying an inline style



(Edited by poi on 11-14-2004 02:53)

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 11-14-2004 03:39

Is it possible/reliable to achieve "relative" positioning of a child DIV when the parent DIV is NOT absolute positioned by setting right-margin and bottom-margin properties for the child div?

I guess the question becomes.. How do you have absolute positioned elements relative to a parent element which is not positioned absolute?

Karl

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted posted 11-14-2004 04:11

well to position an element relatively, you should use the position:relative; , which actually is relative to the inline elements, to the previous sibling node to be more precise, which themselves depend of the position of the parent.

Yep, you can use the margin of a child DIV, but without tesing I can't claim for sure that you could use negative margins without affecting the parent itself.

The old sage said once : "play, fiddle, learn"

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 11-14-2004 04:13

Nothing like a little trial and error!
-thanks for the input.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 11-14-2004 04:40
quote:
The position of the child DIV is absolute from the the parent IF the parent specify that its own position:absolute;



OR if the parent is specified as position:relative.

So, a common trick is to set the parent up however you want it, then give it position:relative without setting its x or y positions (they'll default to zero), and it will stay in place, but it can then be used as an anchor for child divs which are positioned absolutely.

Of course, that's how it's supposed to work, but generally I seem to encounter browser bugs when I rely on this behavior.


 

liorean
Bipolar (III) Inmate

From: Umeå, Sweden
Insane since: Sep 2004

posted posted 11-14-2004 06:27

Well, poi isn't quite right there: Absolute is relative to the closest positioned ancestor. That includes elements of both absolute and relative position. Only statically positioned elements are not counted as positioned. The only g5 browser that doesn't get this right is ie5.0w. All other g5 browsers, including ie5m and ie5.5w, get it right. The g6 browsers also get fixed positioning right. (Well, not prefectly right, but close to it.) Relative positioning is relative to the place the element would have been in if it were static. Fixed positioning is relative to viewport (window working area).

I've got a document at http://testsuite.liorean.net/css/posexam/ that displays each of fixed/absolute/relative/static inside of a parent of each type. Moz, saf and msn/osx all exhibit a pair of related bugs that you are not very likely to happen upon in your development, while op7 has a single but different bug that you are even less likely to encounter.

Iew is always the problem: it treats fixed positioning as static. However, except for the box model differences in 5.5 and 6.0 in quirks mode, ie6w manages to display is just as well as moz, saf and msn/osx.

--
var Liorean = {
prototype: XMLGuru.prototype,
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 11-14-2004 06:32

liorean: summary please ; )

*off to scour your site*

liorean
Bipolar (III) Inmate

From: Umeå, Sweden
Insane since: Sep 2004

posted posted 11-14-2004 08:34

Heh, that page is for testing how your browser manages. But I guess the summary is as such: (Note that this does not test for other interactions, such as floats.)



Opera: Gets positioning perfectly except for a bug with absolute positioning inside fixed positioned elements.

Safari: Gets everything correct except for absolute positioning when there is no positioned parent, but is a border on the root element.

Mozilla: Like Safari, with note that fixed positioning makes scrolling jumpy, especially if oyu are using transparency or alpha channels in the background.

MSN/OSX: See Safari

Ie5m: Didn't bother.

Ie5.0w: Gets static right.

Ie5.5w: Gets the box model wrong, but both relative and static are right, and absolute is right under the circumstance that the parent is either absolutely or relatively positioned.

Ie6.0w in quirks mode: See ie5.5w.

Ie6.0w in standards mode: Same as in quirks mode, but gets box model right.





And to sum it up:
- Absolute positioning within relative or absolute positioning is reliably supported.
- Relative positioning is even more solidly supported.
- Every browser gets static right... (back to nn2 at least...)

--
var Liorean = {
prototype: CSSGuru.prototype,
abode: "http://web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 11-14-2004 09:18

Thanks - that helps a lot! (will probably have some more questions in the next day or so)



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu