3d-rendering-context-and-abspos.html (1209B)
1 <!DOCTYPE HTML> 2 <title>CSS Test (Transforms): 3D Rendering Context following DOM Tree (absolute 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="Absolutely 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 background: red; 19 position: relative; 20 } 21 22 .parent { 23 } 24 25 .abspos { 26 position: absolute; 27 top: 0; 28 left: 0; 29 /* Since this element is not in the 3D Rendering Context, this translation 30 does not put it above the <div class="sibling">. */ 31 transform: translateZ(20px); 32 background: red; 33 } 34 35 .sibling { 36 position: absolute; 37 top: 0; 38 left: 0; 39 transform: translateZ(10px); 40 background: green; 41 } 42 43 </style> 44 45 <p>Pass if there is NO red below:</p> 46 47 <div class="cb"> 48 <div class="parent"> 49 <div class="abspos"> 50 </div> 51 </div> 52 <div class="sibling"> 53 </div> 54 </div>