right-2.html (1493B)
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 - right, stuck</title> 7 <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> 8 <link rel="match" href="right-2-ref.html"> 9 <meta name="flags" content="dom"> 10 <meta name="assert" content="Sticky-right scrolled to the middle: should stick to the right edge of the scrolling container"> 11 <style> 12 #scroll { 13 width: 100px; 14 height: 100px; 15 overflow: hidden; 16 border: 1px solid black; 17 white-space: nowrap; 18 } 19 #scroll div { 20 display: inline-block; 21 } 22 .fill { 23 width: 100px; 24 height: 1px; 25 } 26 #contain { 27 width: 200px; 28 height: 10px; 29 background-color: gray; 30 /* This puts the sticky element's "normal position" at 31 the right side of the containing block. */ 32 direction: rtl; 33 } 34 #sticky { 35 position: sticky; 36 right: 10px; 37 width: 10px; 38 height: 10px; 39 background-color: black; 40 } 41 </style> 42 <body> 43 <div id="scroll"> 44 <div class="fill"></div 45 ><div id="contain"> 46 <div id="sticky"></div> 47 </div 48 ><div class="fill"></div> 49 </div> 50 <script type="text/javascript"> 51 document.getElementById("scroll").scrollLeft = 200; 52 </script> 53 </body> 54 </html>