position-relative-table-tr-left-absolute-child.html (1257B)
1 <!DOCTYPE html> 2 <title>position:relative top constraint should behave correctly for <tr> elements</title> 3 <link rel="match" href="position-relative-table-left-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: 100px; 32 height: 50px; 33 width: 50px; 34 } 35 36 .relative { 37 position: relative; 38 left: 50px; 39 background-color: green; 40 } 41 42 .absolute { 43 position: absolute; 44 left: 50px; 45 background-color: green; 46 } 47 </style> 48 49 <div class="group"> 50 <div> 51 <div class="indicator"></div> 52 <table> 53 <tbody> 54 <tr class="relative"><td><div class="absolute"></div></td></tr> 55 <tr><td><div></div></td></tr> 56 <tr><td><div></div></td></tr> 57 <tr><td><div></div></td></tr> 58 </tbody> 59 </table> 60 </div> 61 </div> 62 63 <div>You should see a green box above. No red should be visible.</div>