overhanging-float-paint-order.html (840B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> 3 <link rel="help" href="https://drafts.csswg.org/css2/zindex.html"> 4 <link rel="match" href="overhanging-float-paint-order-ref.html"> 5 <style> 6 #first-container { 7 width: 100px; 8 height: 60px; 9 } 10 11 #red-first-float { 12 width: 100px; 13 height: 60px; 14 background-color: red; 15 float: left; 16 } 17 18 #container { 19 width: 100px; 20 height: 80px; 21 } 22 23 #blue-second-float-overhanging { 24 width: 100px; 25 height: 60px; 26 background-color: blue; 27 float: left; 28 margin-top: -20px; 29 } 30 31 #green-third-float { 32 width: 100px; 33 height: 80px; 34 background-color: green; 35 float: left; 36 margin-top: -100px; 37 } 38 </style> 39 <div id="red-first-float"></div> 40 <div id="container"> 41 <div id="blue-second-float-overhanging"></div> 42 <div id="green-third-float"></div> 43 </div>