Prev: fixed height.
Next: Newbie layout/positioning problem
From: Gus Richter on 3 Apr 2008 11:56
A floated element basically is stacked on top of the subsequent
shrinkwrapping element.
If the shrinkwrap is given position:relative then this stacking order
is reversed.
Why is this reversal in stacking order?

--
Gus
From: dorayme on 3 Apr 2008 18:37
In article <qqCdnbpviZLdY2nanZ2dnUVZ_hisnZ2d(a)golden.net>,
Gus Richter <gusrichter(a)netscape.net> wrote:

> A floated element basically is stacked on top of the subsequent
> shrinkwrapping element.
> If the shrinkwrap is given position:relative then this stacking order
> is reversed.
> Why is this reversal in stacking order?

Care to discuss this in some such form as:

<!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 {display:table-cell; border: 1px solid;background: #ffc;}
#float {float: left; border: 1px solid; background: #cfc;}
</style>
</head>
<body>
<div id="float">Some text</div>
<div id="shrink">Some text</div>
</body>
</html>

and modify to show what you are wondering about. Sounds interesting Gus
but there are so many things you could be referring to?

--
dorayme
From: Gus Richter on 3 Apr 2008 21:47
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;padding:6px;background:orange;">
<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>

From: dorayme on 3 Apr 2008 23:29
In article <MPWdnYQR98QBFWjanZ2dnUVZ_sednZ2d(a)golden.net>,
Gus Richter <gusrichter(a)netscape.net> wrote:

> #shrink {border: 1px solid;background: #ffc;width:8em;}

OK Gus, will take a look. But I am puzzled why you talk of #shrink being
"shrinkwrapped" (I used the id to try to interpret what you meant by
styling it with something that is normally associated with the idea of
shrinkwrapping. You drop this. Giving a div a width is not "shrink"
wrapping it.)

--
dorayme
From: Jeff on 3 Apr 2008 22:38
dorayme wrote:
> In article <MPWdnYQR98QBFWjanZ2dnUVZ_sednZ2d(a)golden.net>,
> Gus Richter <gusrichter(a)netscape.net> wrote:
>
>> #shrink {border: 1px solid;background: #ffc;width:8em;}
>
> OK Gus, will take a look. But I am puzzled why you talk of #shrink being
> "shrinkwrapped"

Oh, there is some web design book that calls it that. I had never heard
of it until then.

Something about floats shrinking to the minimum size of the contents,
again something I'm unfamiliar with.

Perhaps someone can elaborate on this.

Jeff


(I used the id to try to interpret what you meant by
> styling it with something that is normally associated with the idea of
> shrinkwrapping. You drop this. Giving a div a width is not "shrink"
> wrapping it.)
>
 |  Next  |  Last
Pages: 1 2 3 4 5 6 7 8 9 10 11
Prev: fixed height.
Next: Newbie layout/positioning problem