|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <style> |
|
5 table { |
|
6 margin: 0; |
|
7 padding: 0 |
|
8 width: 50px; |
|
9 height: 100px; |
|
10 border-collapse: collapse; |
|
11 } |
|
12 tr { |
|
13 height: 50px; |
|
14 } |
|
15 td { |
|
16 width: 50px; |
|
17 margin: 0; |
|
18 padding: 0; |
|
19 } |
|
20 tfoot { |
|
21 height: 50%; |
|
22 } |
|
23 #rel { |
|
24 position: relative; |
|
25 } |
|
26 .abs { |
|
27 position: absolute; |
|
28 margin: 0; |
|
29 padding: 0; |
|
30 bottom: 25px; |
|
31 right: 25px; |
|
32 width: 50px; |
|
33 height: 50px; |
|
34 background-color: green; |
|
35 } |
|
36 #bad { |
|
37 background-color: blue; |
|
38 } |
|
39 #bottomright { |
|
40 position: absolute; |
|
41 margin: 0; |
|
42 padding: 0; |
|
43 bottom: 0; |
|
44 right: 0; |
|
45 width: 100px; |
|
46 height: 100px; |
|
47 overflow: visible; |
|
48 } |
|
49 </style> |
|
50 </head> |
|
51 <body> |
|
52 The green square should not completely cover the blue square. |
|
53 <div class="abs" id="bad"></div> |
|
54 <div id="bottomright"> |
|
55 <table> |
|
56 <tbody id="rel"> |
|
57 <tr> |
|
58 <td> |
|
59 <div class="abs"></div> |
|
60 </td> |
|
61 </tr> |
|
62 </tbody> |
|
63 <tfoot> |
|
64 <tr></tr> |
|
65 </tfoot> |
|
66 </table> |
|
67 </div> |
|
68 </body> |
|
69 </html> |