abspos-008

Shrink wrapping of absolute positioned blocks

WeasyPrint

This browser

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3 <head> 
 4   <title>CSS Test: Shrink wrapping of absolute positioned blocks</title>
 5   <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
 6   <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
 7   <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/011.html" type="text/html">
 8   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">
 9   <style> 
10    .container { font-size: 100px; position: relative; border-top: 10px solid white; }
11    .outer { position: absolute; top: 0; left: 0; z-index: 1; }
12    .inner { background: green; color: white; float: left; }
13    .control { float: left; color: yellow; background: red; }
14   </style> 
15  </head>
16 <body>
17   <p>There should be no red below.</p>
18   <div class="container">
19    <div class="outer">
20     <div class="inner">
21      X X0
22     </div>
23    </div>
24    <div class="control">X X1</div>
25   </div>
26  
27 </body>
28 </html>