top-6.html (1336B)
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 - top, contained</title> 7 <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> 8 <link rel="match" href="top-6-ref.html"> 9 <meta name="flags" content="dom"> 10 <meta name="assert" content="Sticky-top with too much scrolling: should stay within the containing block"> 11 <style> 12 #scroll { 13 height: 100px; 14 overflow: hidden; 15 } 16 #contain { 17 height: 300px; 18 background-color: gray; 19 padding: 10px 0; 20 border-width: 10px 0; 21 border-style: solid; 22 border-color: #333; 23 } 24 #sticky { 25 position: sticky; 26 top: 10px; 27 height: 10px; 28 background-color: black; 29 } 30 #static { 31 height: 10px; 32 background-color: blue; 33 } 34 </style> 35 </head> 36 <body> 37 <div id="scroll"> 38 <div style="height: 20px"></div> 39 <div id="contain"> 40 <div id="sticky"></div> 41 <div id="static"></div> 42 </div> 43 <div style="height: 100px"></div> 44 </div> 45 <script type="application/javascript"> 46 document.getElementById("scroll").scrollTop = 335; 47 </script> 48 </body> 49 </html>