float导致的渲染顺序变化
设置了浮动的元素，页面排序和堆叠会发生变化。浮动元素放置在普通元素和定位元素之间。位置关系如下：
1.根元素
2.正常的元素
3.浮动元素
4.行内元素按正常布局渲染
4.设置了定位的元素
示例如下：（注意元素的前后位置）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html> 4 <head><style type="text/css"> 5 6 div { 7 font: 12px Arial; 8 } 9 10 span.bold { font-weight: bold; } 11 12 #absdiv1 { 13 opacity: 0.7; 14 position: absolute; 15 width: 150px; 16 height: 200px; 17 top: 10px; 18 right: 140px; 19 border: 1px dashed #990000; 20 background-color: #ffdddd; 21 text-align: center; 22 } 23 24 #normdiv { 25 /*opacity: 0.7;*/ 26 height: 100px; 27 border: 1px dashed #999966; 28 background-color: #ffffcc; 29 margin: 0px 10px 0px 10px; 30 text-align: left; 31 } 32 33 #flodiv1 { 34 opacity: 0.7; 35 margin: 0px 10px 0px 20px; 36 float: left; 37 width: 150px; 38 height: 200px; 39 border: 1px dashed #009900; 40 background-color: #ccffcc; 41 text-align: center; 42 } 43 44 #flodiv2 { 45 opacity: 0.7; 46 margin: 0px 20px 0px 10px; 47 float: right; 48 width: 150px; 49 height: 200px; 50 border: 1px dashed #009900; 51 background-color: #ccffcc; 52 text-align: center; 53 } 54 55 #absdiv2 { 56 opacity: 0.7; 57 position: absolute; 58 width: 150px; 59 height: 100px; 60 top: 130px; 61 left: 100px; 62 border: 1px dashed #990000; 63 background-color: #ffdddd; 64 text-align: center; 65 } 66 67 </style></head> 68 69 <body> 70 71 <br /><br /> 72 73 <div id="absdiv1"> 74 <br /><span class="bold">DIV #1</span> 75 <br />position: absolute; 76 </div> 77 78 <div id="flodiv1"> 79 <br /><span class="bold">DIV #2</span> 80 <br />float: left; 81 </div> 82 83 <div id="flodiv2"> 84 <br /><span class="bold">DIV #3</span> 85 <br />float: right; 86 </div> 87 <br /> 88 <div id="normdiv"> 89 <br /><span class="bold">DIV #4</span> 90 <br />no positioning 91 </div> 92 <div id="absdiv2"> 93 <br /><span class="bold">DIV #5</span> 94 <br />position: absolute; 95 </div> 96 <span typw="text" value="ffff" style="border: 1px red solid;">这是行内元素</span> 97 </body></html>
这里又有一个奇怪的现象，如果将DIV #4的opacity设置一个小于1的数后，DIV #4会向上移动盖在folat元素的上面。该问题会在后面的文章中涉及到。