stacking-context-1.html (1083B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 - http://creativecommons.org/publicdomain/zero/1.0/ --> 4 <html> 5 <head> 6 <title>CSS Test: Sticky Positioning - stacking context</title> 7 <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> 8 <link rel="match" href="stacking-context-1-ref.html"> 9 <meta name="assert" content="Sticky positioning should establish a stacking context"> 10 <style> 11 body { 12 margin: 0; 13 } 14 div { 15 width: 100px; 16 height: 100px; 17 } 18 #static { 19 position: absolute; 20 top: 20px; 21 left: 20px; 22 background-color: blue; 23 z-index: 1; 24 } 25 #sticky { 26 position: sticky; 27 top: 0; 28 left: 0; 29 background-color: black; 30 } 31 #inner { 32 position: relative; 33 top: 40px; 34 left: 40px; 35 background-color: gray; 36 z-index: 2; 37 } 38 </style> 39 <body> 40 <div id="static"></div> 41 <div id="sticky"> 42 <div id="inner"></div> 43 </div> 44 </body> 45 </html>