transform-containing-block-dynamic-1b.html (1693B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS transforms: Creating containing block for fixed positioned elements</title> 4 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 5 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-rendering"> 7 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property"> 8 <link rel="match" href="containing-block-dynamic-1-ref.html"> 9 <meta name="assert" content="For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants."> 10 <meta name="assert" content="The object acts as a containing block for fixed positioned descendants." 11 <meta name="flags" content="dom"> 12 <style> 13 html, body { margin: 0; padding: 0 } 14 #changetransform { 15 position: absolute; 16 top: 100px; 17 left: 100px; 18 } 19 20 #abscovered { 21 position: absolute; 22 top: 50px; 23 left: 50px; 24 background: red; 25 height: 100px; 26 width: 100px; 27 } 28 29 #fixedmoves { 30 position: fixed; 31 top: 50px; 32 left: 50px; 33 background: green; 34 height: 100px; 35 width: 100px; 36 } 37 </style> 38 <body> 39 <div id="changetransform"> 40 <div id="abscovered"></div> 41 <div id="fixedmoves"></div> 42 </div> 43 <script> 44 var changetransform = document.getElementById("changetransform"); 45 var fixedmoves = document.getElementById("fixedmoves"); 46 var causeFlush = fixedmoves.offsetTop; 47 changetransform.style.transform = "translateX(0px)"; 48 </script> 49 </body>