margin-1.html (1187B)
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 - element margin</title> 7 <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> 8 <link rel="match" href="margin-1-ref.html"> 9 <meta name="flags" content="dom"> 10 <meta name="assert" content="Sticky-top with margin-bottom on the sticky element: the element's margin box 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 } 20 #sticky { 21 position: sticky; 22 top: 10px; 23 height: 10px; 24 margin-bottom: 5px; 25 background-color: black; 26 } 27 </style> 28 </head> 29 <body> 30 <div id="scroll"> 31 <div style="height: 20px"></div> 32 <div id="contain"> 33 <div id="sticky"></div> 34 </div> 35 <div style="height: 100px"></div> 36 </div> 37 <script type="application/javascript"> 38 document.getElementById("scroll").scrollTop = 300; 39 </script> 40 </body> 41 </html>