3 <title>Absolute Position in RTL parent
</title>
5 .containingBlock { position: fixed; border:
20px solid black; }
6 #cbOne { width:
200px; height:
300px; }
7 #cbOne
> table { direction: rtl; width:
100px; }
8 #cbTwo { width:
300px; height:
200px; left:
300px; }
9 #cbTwo
> div { position: relative; direction: rtl; width:
200px; }
11 .box { width:
100px; height:
100px; }
12 #test1 { background: olive; }
13 #test2 { position: absolute; background: green; }
14 #test3 { position: absolute; bottom:
0; right:
100px; background: olive; }
18 <p>On the left, you should see three blocks that are aligned left within a black box. They should
19 be stacked vertically with the green box in between two olive boxes. The olive boxes and the green
20 box should be
100x100, and there should be
100 pixels of padding on the right side of the box stack.
22 <p>On the right, you should see two blocks that are centered within a black box. They should be
23 stacked vertically with the green box below the olive box. The olive box and the green box should
24 be
100x100, and there should be
100 pixels of padding on either side of the box stack.
26 <div id=
"cbOne" class=
"containingBlock">
27 <table cellspacing=
"0" cellpadding=
"0">
30 <div id=
"test1" class=
"box"></div>
31 <div id=
"test2" class=
"box"></div>
32 <div id=
"test3" class=
"box"></div>
37 <div id=
"cbTwo" class=
"containingBlock">
39 <div id=
"test1" class=
"box"></div>
40 <div id=
"test2" class=
"box"></div>