Stacking context: absolute positioning and floats - css

Question

This MDN article explains the stacking context and floats. Here is the example they provide:
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;
}
<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>
In the example, div#1 should belong to category 5 (Descendant positioned elements) and div#3 should belong to category 3 (Floating blocks). So div#1 should be over div#3. Why is it below in the example?

Answer 1

Stacking order and opacity
The stacking order is affected by the opacity property. This is noted in the article you linked to:
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 implicitly create a stacking context.)
Testing this theory
Let's reduce the markup to include just the two divs in question. Here is the scenario we see; the absolutely positioned div1 is underneath div3:
div {
padding: 20px;
}
#div1 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 200px;
top: 100px;
left: 50px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#div3 {
opacity: 0.7;
margin: 0px 20px 0px 10px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
<div id="div1">
DIV #1
<br>position: absolute;
</div>
<div id="div3">
DIV #3
<br>float: right;
</div>
Now, let's remove the opacity properties (specifically the one on div3). The stacking order is now as you expect it to be:
div {
padding: 20px;
}
#div1 {
/*opacity: 0.7;*/
position: absolute;
width: 150px;
height: 200px;
top: 100px;
left: 50px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#div3 {
/*opacity: 0.7;*/
margin: 0px 20px 0px 10px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
<div id="div1">
DIV #1
<br>position: absolute;
</div>
<div id="div3">
DIV #3
<br>float: right;
</div>
Read more
Here is an in-depth write-up on how the opacity property affects the stacking order.