position-relative-table-td-top.html (1171B)
1 <!DOCTYPE html> 2 <title>position:relative top constraint should behave correctly for <td> elements</title> 3 <link rel="match" href="position-relative-table-top-ref.html" /> 4 <link rel="help" href="https://www.w3.org/TR/css-position-3/#rel-pos" /> 5 <meta name="assert" content="This test checks that the position:relative top constraint behaves correctly for <td> elements" /> 6 7 <style> 8 table { 9 border-collapse:collapse; 10 } 11 12 td { 13 padding: 0; 14 } 15 16 td > div { 17 height: 50px; 18 width: 50px; 19 } 20 21 .group { 22 display: inline-block; 23 position: relative; 24 width: 150px; 25 height: 200px; 26 } 27 28 .indicator { 29 position: absolute; 30 background-color: red; 31 left: 0; 32 top: 100px; 33 height: 50px; 34 width: 50px; 35 } 36 37 .relative { 38 position: relative; 39 top: 100px; 40 background-color: green; 41 } 42 </style> 43 44 <div class="group"> 45 <div> 46 <div class="indicator"></div> 47 <table> 48 <tbody> 49 <tr><td class="relative"><div></div></td></tr> 50 <tr><td><div></div></td></tr> 51 <tr><td><div></div></td></tr> 52 <tr><td><div></div></td></tr> 53 </tbody> 54 </table> 55 </div> 56 </div> 57 58 <div>You should see a green box above. No red should be visible.</div>