bottom-4.html (1117B)
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 - bottom, contained</title> 7 <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> 8 <link rel="match" href="bottom-3-ref.html"> 9 <meta name="assert" content="Bottom-sticky with too much content above: should stay within the containing block"> 10 <style> 11 #scroll { 12 height: 100px; 13 overflow: hidden; 14 } 15 #contain { 16 height: 200px; 17 background-color: gray; 18 padding: 10px 0; 19 border-width: 10px 0; 20 border-style: solid; 21 border-color: #333; 22 } 23 #sticky { 24 position: sticky; 25 bottom: 10px; 26 height: 10px; 27 margin-top: 2px; 28 background-color: black; 29 } 30 </style> 31 </head> 32 <body> 33 <div id="scroll"> 34 <div style="height: 75px"></div> 35 <div id="contain"> 36 <div style="height: 100px"></div> 37 <div id="sticky"></div> 38 </div> 39 </div> 40 </body> 41 </html>