45 lines
1.6 KiB
HTML
45 lines
1.6 KiB
HTML
<html>
|
|
<head>
|
|
<title>Absolute Position in RTL parent</title>
|
|
<style>
|
|
.containingBlock { position: fixed; border: 20px solid black; }
|
|
#cbOne { width: 200px; height: 300px; }
|
|
#cbOne > table { direction: rtl; width: 100px; }
|
|
#cbTwo { width: 300px; height: 200px; left: 300px; }
|
|
#cbTwo > div { position: relative; direction: rtl; width: 200px; }
|
|
|
|
.box { width: 100px; height: 100px; }
|
|
#test1 { background: olive; }
|
|
#test2 { position: absolute; background: green; }
|
|
#test3 { position: absolute; bottom: 0; right: 100px; background: olive; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>On the left, you should see three blocks that are aligned left within a black box. They should
|
|
be stacked vertically with the green box in between two olive boxes. The olive boxes and the green
|
|
box should be 100x100, and there should be 100 pixels of padding on the right side of the box stack.
|
|
</p>
|
|
<p>On the right, you should see two blocks that are centered within a black box. They should be
|
|
stacked vertically with the green box below the olive box. The olive box and the green box should
|
|
be 100x100, and there should be 100 pixels of padding on either side of the box stack.
|
|
</p>
|
|
<div id="cbOne" class="containingBlock">
|
|
<table cellspacing="0" cellpadding="0">
|
|
<tr>
|
|
<td>
|
|
<div id="test1" class="box"></div>
|
|
<div id="test2" class="box"></div>
|
|
<div id="test3" class="box"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="cbTwo" class="containingBlock">
|
|
<div>
|
|
<div id="test1" class="box"></div>
|
|
<div id="test2" class="box"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|