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 Multi-column Layout Test: a column box can not act as containing block for elements with 'position: absolute'</title>
5 <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
6 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-27 -->
7 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model">
8 <link rel="match" href="reference/multicol-containing-001-ref.htm">
9 <meta name="flags" content="ahem">
10 <meta name="assert" content="This test checks that a column box does not establish containing block for elements with 'position: absolute'.">
11 <style type="text/css">
12 div
13 {
14 background-color: yellow;
15 border: gray solid 1em;
16 color: black;
17 font: 1.25em/1 Ahem;
18 orphans: 1;
19 widows: 1;
20 width: 12em;
21
22 column-count: 3;
23 column-gap: 0;
24 }
25
26 span
27 {
28 color: red;
29 position: absolute;
30 top: -1em;
31 }
32
33 /*
34 In this test, the initial containing block establishes containing block
35 for such red span. Therefore, the 2 short red stripes should be
36 positioned out of view, just outside the top edge of viewport.
37 */
38
39 </style>
40 </head>
41 <body>
42 <div>
43 bl ac
44 <span>re dd</span>
45 bl ac
46 bl ac
47 </div>
48 </body>
49 </html>