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