|
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 #rel { |
|
21 position: relative; |
|
22 } |
|
23 .abs { |
|
24 position: absolute; |
|
25 margin: 0; |
|
26 padding: 0; |
|
27 bottom: 25px; |
|
28 right: 25px; |
|
29 width: 50px; |
|
30 height: 50px; |
|
31 background-color: green; |
|
32 } |
|
33 #bad { |
|
34 background-color: blue; |
|
35 } |
|
36 #bottomright { |
|
37 position: absolute; |
|
38 margin: 0; |
|
39 padding: 0; |
|
40 bottom: 0; |
|
41 right: 0; |
|
42 width: 100px; |
|
43 height: 100px; |
|
44 overflow: visible; |
|
45 } |
|
46 </style> |
|
47 </head> |
|
48 <body> |
|
49 The green square should not completely cover the blue square. |
|
50 <div class="abs" id="bad"></div> |
|
51 <div id="bottomright"> |
|
52 <table> |
|
53 <tr id="rel"> |
|
54 <td> |
|
55 <div class="abs"></div> |
|
56 </td> |
|
57 </tr> |
|
58 <tr></tr> |
|
59 </table> |
|
60 </div> |
|
61 </body> |
|
62 </html> |