3d-rendering-context-and-fixpos.html (1226B)
1 <!DOCTYPE HTML> 2 <title>CSS Test (Transforms): 3D Rendering Context following DOM Tree (fixed positioning)</title> 3 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 4 <link rel="author" title="Google" href="http://www.google.com/"> 5 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#3d-rendering-contexts"> 6 <meta name="assert" content="Fixed positioned elements participate in 3D Rendering Contexts based on their parent, not their containing block."> 7 <link rel="match" href="reference/green.html"> 8 9 <style> 10 11 div { 12 width: 100px; 13 height: 100px; 14 } 15 16 .cb { 17 transform-style: preserve-3d; 18 transform: translateX(0); 19 background: red; 20 position: relative; 21 } 22 23 .parent { 24 } 25 26 .abspos { 27 position: fixed; 28 top: 0; 29 left: 0; 30 /* Since this element is not in the 3D Rendering Context, this translation 31 does not put it above the <div class="sibling">. */ 32 transform: translateZ(20px); 33 background: red; 34 } 35 36 .sibling { 37 position: absolute; 38 top: 0; 39 left: 0; 40 transform: translateZ(10px); 41 background: green; 42 } 43 44 </style> 45 46 <p>Pass if there is NO red below:</p> 47 48 <div class="cb"> 49 <div class="parent"> 50 <div class="abspos"> 51 </div> 52 </div> 53 <div class="sibling"> 54 </div> 55 </div>