z-index-stack-003.xht (1674B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>CSS Test: Z-index - stacking levels of positioned elements versus floated elements</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 <link rel="help" title="Section 9.9.1 Specifying the stack level: the 'z-index' property" href="http://www.w3.org/TR/CSS21/visuren.html#z-index" /> 11 <meta content="Positioned elements should be painted over floated elements. A positioned descendant with 'z-index: auto' has a greater stacking level than non-positioned floated elements." name="assert" /> 12 13 <style type="text/css"><![CDATA[ 14 #rel-pos-containing-block {position: relative;} 15 16 #yellow-overlapping-abs-pos 17 { 18 background-color: yellow; 19 height: 100px; 20 left: 60px; 21 position: absolute; 22 top: 60px; 23 width: 100px; 24 z-index: auto; 25 } 26 27 #blue-first-float 28 { 29 background-color: blue; 30 float: left; 31 height: 100px; 32 width: 100px; 33 } 34 35 #orange-second-float 36 { 37 background-color: orange; 38 float: left; 39 height: 100px; 40 margin-left: -70px; 41 margin-top: 30px; 42 width: 100px; 43 } 44 ]]></style> 45 46 </head> 47 48 <body> 49 50 <p>Test passes if the boxes are partially stacked on top of each other and if they are stacked in the following order <strong>from bottom to top: blue, orange, yellow</strong>.</p> 51 52 <div id="rel-pos-containing-block"> 53 <div id="yellow-overlapping-abs-pos"></div> 54 <div id="blue-first-float"></div> 55 <div id="orange-second-float"></div> 56 </div> 57 58 </body> 59 </html>