dorayme wrote:
> modify to show what you are wondering about. Sounds interesting Gus
> but there are so many things you could be referring to?
All is in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css" media="all">
#shrink {border: 1px solid;background: #ffc;width:8em;}
#float {float: left; border: 1px solid; background: #cfc;width:4em;}
#wrapper {margin-top:250px;}
#shrink_1 {border: 1px solid;background: #ffc;width:8em; position:relative;}
#float_1 {float: left; border: 1px solid; background: #cfc;width:4em;}
#wrapper_2 {margin-top:50px;}
#shrink_2 {border: 1px solid;width:8em; position:relative;}
#float_2 {float: left; border: 1px solid; background: #cfc;width:4em;}
</style>
</head>
<body>
<div id="float">Some text and more</div>
<div id="shrink">Some text and some more to get a few more lines.</div>
<div style="position:absolute;top:50px;left:200px;width :400px;border:2px
solid
adding:6px;background
range;">
<p>
"Assume" #float to be positioned at top:0;left:0; - then #shrink (the
shrinkwrap box) is also at top:0;left:0;</p>
<p>So the floated element (#float) basically is stacked on top of the
subsequent shrinkwrapping element (#shrink).<br>
If the shrinkwrap is given position:relative then this stacking order
is reversed. [see example 2] - #float is behind #shrink and
therefore is covered (hidden).<br>
<span style="color:red;">Why is this reversal in stacking order?</span></p>
<p>Example 3 is the same as example 2 except the shrinkwrapping element
(#shrink) has its background removed - #float is still behind
#shrink but now we can see the float again since its no longer covered.</p>
</div>
<div id="wrapper">
<div id="float_1">Some text and more</div>
<div id="shrink_1">Some text and some more to get a few more lines.</div>
</div>
<div id="wrapper_2">
<div id="float_2">Some text and more</div>
<div id="shrink_2">Some text and some more to get a few more lines.</div>
</div>
</body>
</html>