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: Relative-positioning Inline Containing Block</title>
5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
7 <meta name="flags" content="">
8 <meta name="assert" content="When such an inline box is affected by relative positioning, the relative positioning also affects the block-level box contained in the inline box.">
9 <style type="text/css">
10 .container {
11 margin: 1em;
12 font: 20px/1 Ahem;
13 border: solid silver;
14 width: 4em;
15 color: aqua;
16 background: fuchsia;
17 }
18 .relpos {
19 position: relative;
20 color: yellow;
21 left: 2em;
22 }
23 .block, .controlC {
24 color: orange;
25 background: orange;
26 width: 2em;
27 margin-left: -2em;
28 border-left: 2em solid blue
29 }
30
31 .controlB {
32 color: yellow;
33 }
34 .controlC {
35 margin-left: 0;
36 }
37 </style>
38 </head>
39 <body>
40 <p>The patterns in the two silver boxes below must be identical.</p>
41 <div class="container">
42 A<span class="relpos">B
43 <div class="block">C</div>
44 B</span>A
45 </div>
46 <div class="container">
47 A <span class="controlB">B</span>
48 <div class="controlC">C</div>
49 A<span class="controlB">B</span>
50 </div>
51 </body>
52 </html>