position-sticky-stacking-context.html (1109B)
1 <!DOCTYPE html> 2 <title>position: sticky should create a stacking context</title> 3 <link rel="match" href="position-sticky-stacking-context-ref.html" /> 4 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 5 <meta name="assert" content="position:sticky elements should create a stacking context" /> 6 7 <script src="../resources/ref-rectangle.js"></script> 8 9 <style> 10 .indicator { 11 position: absolute; 12 background-color: green; 13 z-index: 1; 14 } 15 16 .sticky { 17 position: sticky; 18 z-index: 0; 19 } 20 21 .child { 22 position: relative; 23 background-color: red; 24 z-index: 2; 25 } 26 27 .box { 28 width: 200px; 29 height: 200px; 30 } 31 </style> 32 33 <script> 34 window.addEventListener('load', function() { 35 createIndicatorForStickyElements(document.querySelectorAll('.sticky')); 36 }) 37 </script> 38 39 <div>You should see a single green box below. No red or blue should be visible.</div> 40 41 <div class="indicator box"></div> 42 <div class="sticky box"> 43 <!-- Because sticky forms a stacking context, this child remains on bottom 44 even though it has a higher z-index than the indicator box. --> 45 <div class="child box"></div> 46 </div>