position-relative-table-tr-top-absolute-child.html (1236B)
1 <!DOCTYPE html> 2 <title>position:relative top constraint should behave correctly for <tr> 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 <tr> 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: 50px; 40 } 41 .absolute { 42 position: absolute; 43 top: 50px; 44 background-color: green; 45 } 46 </style> 47 48 <div class="group"> 49 <div> 50 <div class="indicator"></div> 51 <table> 52 <tbody> 53 <tr class="relative"><td><div class="absolute"></div></td></tr> 54 <tr><td><div></div></td></tr> 55 <tr><td><div></div></td></tr> 56 <tr><td><div></div></td></tr> 57 </tbody> 58 </table> 59 </div> 60 </div> 61 62 <div>You should see a green box above. No red should be visible.</div>