Position relative to parent element

[Markus Ernst]

Hello

Reading the follwing document:
http://www.w3.org/TR/WD-positioning-970131#In-flow
it seems very clear that position:relative should be relative to the parent
element. So in the following test case element1 and element2 should be
placed side by side inside a centered white container element:

http://www.markusernst.ch/test.htm

General structure:
<container>
<element1 />
<element2 />
</container>

Anyway all browsers I can test (Firefox, IE6 PC, IE5 Mac, Opera, Safari)
position element2 relative to the bottom left corner of element1. (IE even
applies the centering inherited from the body, I left this in the example
for humour purposes only...)

So the generally accepted reference of relative positioning seems to be
rather the bottom left corner of the preceding element than the top left
corner of the parent element. Is this behaviour correct? And is there any
possibility to achieve a layout with a fixed size centered content area
without frames or layout tables? (I can't float the elements inside the
container, as some might overlap.)

--
Markus

[Steve Pugh]

On Mon, 15 Nov 2004 16:22:34 +0100, "Markus Ernst"
<derernst@NO#SP#AMgmx.ch> wrote:

Reading the follwing document:
http://www.w3.org/TR/WD-positioning-970131#In-flow
it seems very clear that position:relative should be relative to the parent
element.
Read it again. An element with position: relative; is positioned
relative to it's default position in the flow.
So in the following test case element1 and element2 should be
placed side by side inside a centered white container element:

http://www.markusernst.ch/test.htm

General structure:
<container>
<element1 />
<element2 />
</container>
Not with your styles.

#element1 {
position:relative;
top:0px;
left:0px;
}
#element2 {
position:relative;
top:0px;
left:200px;
}

element1 will appear exactly where it would if there were no
positioning styles applied to it at all - because it's been moved 0px
to the left of where it was and 0px down.

element2 will appear on the same vertical level as its original
position (due to top: 0px;) and 200px to the left of its original
position (due to left: 200px;).

This is exactly what you see.

Anyway all browsers I can test (Firefox, IE6 PC, IE5 Mac, Opera, Safari)
position element2 relative to the bottom left corner of element1.

So the generally accepted reference of relative positioning seems to be
rather the bottom left corner of the preceding element than the top left
corner of the parent element. Is this behaviour correct?
No, you've totally misunderstood how relative positioning works.
And is there any
possibility to achieve a layout with a fixed size centered content area
without frames or layout tables? (I can't float the elements inside the
container, as some might overlap.)

#container {
position: relative;
}
#element1 {
width:200px;
height:150px;
position:absolute;
top:0px;
left:0px;
}
#element2 {
width:200px;
height:150px;
position:absolute;
top:0px;
left:200px;
}

The position: relative on the parent creates a new origin for the
absolute positioning of the child elements.

Steve

[Markus Ernst]

Steve Pugh wrote:
[...]

No, you've totally misunderstood how relative positioning works.

And is there any
possibility to achieve a layout with a fixed size centered content
area without frames or layout tables? (I can't float the elements
inside the container, as some might overlap.)

#container {
position: relative;
}
#element1 {
width:200px;
height:150px;
position:absolute;
top:0px;
left:0px;
}
#element2 {
width:200px;
height:150px;
position:absolute;
top:0px;
left:200px;
}

The position: relative on the parent creates a new origin for the
absolute positioning of the child elements.

I can't believe I thought I knew a lot about CSS for years but never
understood relative positioning. Thanks a lot for this clarification!

--
Markus

[Christoph Paeper]

*Markus Ernst* <derernst@NO#SP#AMgmx.ch>:

Reading the follwing document:
http://www.w3.org/TR/WD-positioning-970131#In-flow

Why do you read some _Working Draft_ instead of the actual specification?

--
"Living in a vacuum sucks." - Adrienne E. Gusoff