padding-1.html (1006B)
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 - percentage offsets</title> 7 <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> 8 <link rel="match" href="padding-1-ref.html"> 9 <meta name="assert" content="Percentage offsets should be resolved against the content box of the scrolling container"> 10 <style> 11 body { 12 /* Make sure it works on the first pass of reflow */ 13 overflow: scroll; 14 } 15 #scroll { 16 width: 130px; 17 height: 80px; 18 overflow: scroll; 19 border: 10px solid black; 20 padding: 10px; 21 } 22 #sticky { 23 position: sticky; 24 top: 50%; 25 left: 50%; 26 width: 10px; 27 height: 10px; 28 background-color: black; 29 } 30 </style> 31 <body> 32 <div id="scroll"> 33 <div id="sticky"> 34 </div> 35 </div> 36 </body> 37 </html>