Topic: Absolute position DIVs in DIVs

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..

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 :

<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)

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

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"

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

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.


 

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"};

liorean: summary please ; )

*off to scour your site*

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"};

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