abspos-width-change-inline-container-001.html (807B)
1 <!DOCTYPE html> 2 <title>CSS Test: Absolutely positioned object in an inline container repsonding to the block width change</title> 3 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"> 4 <link rel="match" href="abspos-width-change-inline-container-001-ref.html"> 5 <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> 6 <style> 7 #container { 8 text-align: center; 9 width: 200px; 10 } 11 #relpos { 12 position: relative; 13 background: red; 14 } 15 #abspos { 16 position: absolute; 17 left: 0; 18 top: 0; 19 width: 50px; 20 height: 50px; 21 background: green; 22 } 23 </style> 24 <body> 25 <div id="container"> 26 <span id="relpos">x 27 <span id="abspos"></span> 28 </span> 29 </div> 30 <script> 31 run(); 32 function run() { 33 document.body.offsetTop; 34 container.style.width = '100px'; 35 } 36 </script> 37 </body>