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