abspos-container-change-dynamic-001.html (935B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Dynamic position change in table cell with abspos child</title> 4 <link rel="help" href="https://drafts.csswg.org/css-position-3/#position-property"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1815552"> 6 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 7 <link rel="author" title="Mozilla" href="https://mozilla.org"> 8 <link rel="match" href="abspos-container-change-dynamic-001-ref.html"> 9 <table> 10 <tbody> 11 <tr> 12 <td>A</td> 13 <td id="target">B</td> 14 </tbody> 15 </table> 16 <script> 17 let target = document.getElementById("target"); 18 target.getBoundingClientRect(); 19 target.style.position = "relative"; 20 let abspos = document.createElement("div"); 21 abspos.style = ` 22 position: absolute; 23 top: 0; 24 left: 0; 25 width: 100px; 26 height: 100px; 27 background-color: lime; 28 `; 29 target.appendChild(abspos); 30 </script>