transform-style-stacking-context.html (881B)
1 <!DOCTYPE HTML> 2 <title>'transform-style: preserve-3d' establishes a stacking context.</title> 3 <link rel="author" title="Psychpsyo" href="mailto:psychpsyo@gmail.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property"> 5 <link rel="match" href="transform-lime-square-ref.html"> 6 <style> 7 div { 8 width: 100px; 9 height: 100px; 10 } 11 #front { 12 background-color: lime; 13 /* makes a stacking context and puts this on top */ 14 position: absolute; 15 z-index: 10; 16 } 17 #back { 18 transform-style: preserve-3d; 19 } 20 #notOnTop { 21 background-color: red; 22 /* z-index is higher than on #front, but this should still be covered up because it is inside #back, which has 'transform-style: preserve-3d' */ 23 position: absolute; 24 z-index: 1000; 25 } 26 </style> 27 <div id="front"></div> 28 <div id="back"> 29 <div id="notOnTop"></div> 30 </div>