containing-block-002

Containing block for relative positioned elements is nearest table cell ancestor

WeasyPrint

This browser

Assertion
If the element's position is 'relative', the containing block is formed by the content edge of the nearest table cell ancestor box.

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: Containing block for relative positioned elements is nearest table cell ancestor</title>
 5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
 6         <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">
 7         <meta name="flags" content="">
 8         <meta name="assert" content="If the element's position is 'relative', the containing block is formed by the content edge of the nearest table cell ancestor box.">
 9         <style type="text/css">
10             #table
11             {
12                 display: table;
13             }
14             #row
15             {
16                 display: table-row;
17             }
18             #cell
19             {
20                 background: red;
21                 display: table-cell;
22                 height: 100px;
23                 width: 100px;
24             }
25             #cell div
26             {
27                 background: green;
28                 height: 100%;
29                 position: relative;
30                 width: 100%;
31             }
32         </style>
33     </head>
34     <body>
35         <p>Test passes if there is no red visible on the page.</p>
36         <div id="table">
37             <div id="row">
38                 <div id="cell">
39                     <div></div>
40                 </div>
41             </div>
42         </div>
43     </body>
44 </html>