On 2008-04-04, dorayme <doraymeRidThis @optusnet.com.a uwrote:
[...]
Technically it is still "in the flow" (this is the way the spec talks
about it). But stacked differently, and offset if you offset it of
course.
Actually much of the usefulness of position: relative seems to be that
you get normal flow for the 2D position but become a container for
positioned descendents and can set z-index.
The fact that a relatively positioned box gets the same stacking level
as absolutely positioned boxes is perhaps a bit surprising but
reasonable given that it is the container for them.
Here is an example:
<div style="float: left; height: 300px;
width: 100px; background-color: green">
</div>
<div style="position : relative; background-color: blue; height: 100px;">
<div style="position : absolute;
top: 10px; left: 10px; background-color: red;">
foo
</div>
</div>
It's probably more intuitive that the blue div should be on top of the
green one rather than behind it since it is the containing block for the
red one.
Otherwise the red one would be on top of the green one but positioned
relative to something behind the green one that you can't see which
would be a bit weird.
It is on top as a consequence of the rule that relatively positioned
boxes are in stacking level 6 not 3. So hence the rule perhaps.
[...]
Giving an element a position, even a relative one, seems to take it "out
of the flow" in a notional sense (even if there are no offsets
specified).
of the flow" in a notional sense (even if there are no offsets
specified).
about it). But stacked differently, and offset if you offset it of
course.
Actually much of the usefulness of position: relative seems to be that
you get normal flow for the 2D position but become a container for
positioned descendents and can set z-index.
The fact that a relatively positioned box gets the same stacking level
as absolutely positioned boxes is perhaps a bit surprising but
reasonable given that it is the container for them.
Here is an example:
<div style="float: left; height: 300px;
width: 100px; background-color: green">
</div>
<div style="position : relative; background-color: blue; height: 100px;">
<div style="position : absolute;
top: 10px; left: 10px; background-color: red;">
foo
</div>
</div>
It's probably more intuitive that the blue div should be on top of the
green one rather than behind it since it is the containing block for the
red one.
Otherwise the red one would be on top of the green one but positioned
relative to something behind the green one that you can't see which
would be a bit weird.
It is on top as a consequence of the rule that relatively positioned
boxes are in stacking level 6 not 3. So hence the rule perhaps.