Guest / Items

Understanding CSS z-index:Stacking and float - MDC

Get Feed
Understanding CSS z-index:Stacking and float - MDC
Description
For floating blocks the stacking order is a bit different. Floating blocks are placed between non-positioned blocks and positioned blocks:

  1. Background and borders of the root element
  2. Descendant blocks in the normal flow, in order of appearance (in HTML)
  3. Floating blocks
  4. Descendant positioned elements, in order of appearance (in HTML)

Actually, as you can see in the following example, the background and border of the non-positioned block (DIV #4) is completely unaffected by floating blocks, while the content is affected. This happens according to CSS standard float behaviour.

This behaviour can be explained with an improved version of the previous ordered list:

  1. Background and borders of the root element
  2. Descendant blocks in the normal flow, in order of appearance (in HTML)
  3. Floating blocks
  4. Inline descendants in the normal flow
  5. Descendant positioned elements, in order of appearance (in HTML)

Note:

  • In the example below, all the blocks except the non-positioned one, are translucent show the stacking order. If the opacity of the non-positioned block (DIV #4) is reduced, then something strange happens: the background and border of that block pops up above the floating blocks, but still under positioned blocks. I was not able to understand whether this is a bug or a peculiar interpretation of the specifications. (Applying opacity could implictly create a stacking context.)

Example of stacking rules with floating boxes

Example source code 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><style type="text/css">

div {
   font: 12px Arial;
}

span.bold { font-weight: bold; }

#absdiv1 {
   opacity: 0.7;
   position: absolute;
   width: 150px;
   height: 200px;
   top: 10px;
   right: 140px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}

#normdiv {
   /*opacity: 0.7;*/
   height: 100px;
   border: 1px dashed #999966;
   background-color: #ffffcc;
   margin: 0px 10px 0px 10px;
   text-align: left;
}

#flodiv1 {
   opacity: 0.7;
   margin: 0px 10px 0px 20px;
   float: left;
   width: 150px;
   height: 200px;
   border: 1px dashed #009900;
   background-color: #ccffcc;
   text-align: center;
}

#flodiv2 {
   opacity: 0.7;
   margin: 0px 20px 0px 10px;
   float: right;
   width: 150px;
   height: 200px;
   border: 1px dashed #009900;
   background-color: #ccffcc;
   text-align: center;
}

#absdiv2 {
   opacity: 0.7;
   position: absolute;
   width: 150px;
   height: 100px;
   top: 130px;
   left: 100px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}

</style></head>

<body>

<br /><br />

<div id="absdiv1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
</div>

<div id="flodiv1">
<br /><span class="bold">DIV #2</span>
<br />float: left;
</div>

<div id="flodiv2">
<br /><span class="bold">DIV #3</span>
<br />float: right;
</div>

<br />

<div id="normdiv">
<br /><span class="bold">DIV #4</span>
<br />no positioning
</div>

<div id="absdiv2">
<br /><span class="bold">DIV #5</span>
<br />position: absolute;
</div>

</body></html>
Original URL
http://developer.mozilla.org/en/docs/Understanding_CSS_z-index:Stacking_and_float

Comments

Report This

Twine is about discovering, collecting and sharing the content that interests you. Learn More

Join Twine

Stats

First Posted By

Louis Lefebvre

Tags

Community Tags

Who's Interested In This?

Forgot your password?