position-sticky-bottom-002-ref.html (1967B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Reftest Reference</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 9 <style> 10 div.scrolling-container 11 { 12 display: inline-block; 13 height: 250px; 14 margin-right: 30px; 15 overflow: auto; 16 position: static; 17 width: 150px; 18 } 19 20 div.vertical-spacer-200 21 { 22 height: 200px; 23 } 24 25 div.sticky 26 { 27 background-color: green; 28 height: 100px; 29 position: relative; 30 width: 100px; 31 } 32 33 div#first-sticky 34 { 35 bottom: 100px; 36 } 37 38 div#second-sticky 39 { 40 bottom: 50px; 41 } 42 </style> 43 44 <body onload="document.getElementById("first-scrolling-container").scrollTop = 25; document.getElementById("second-scrolling-container").scrollTop = 100; document.getElementById("third-scrolling-container").scrollTop = 200;"> 45 46 <p>Test passes if there are 3 filled green squares and <strong>no red</strong>. 47 48 <div id="first-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport --> 49 50 <div class="vertical-spacer-200"></div> <!-- 100w x 200h --> 51 52 <div id="first-sticky" class="sticky"></div> <!-- 100w x 100h --> 53 54 <div class="vertical-spacer-200"></div> <!-- 100w x 200h --> 55 56 </div> 57 58 59 <div id="second-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport --> 60 61 <div class="vertical-spacer-200"></div> <!-- 100w x 200h --> 62 63 <div id="second-sticky" class="sticky"></div> <!-- 100w x 100h --> 64 65 <div class="vertical-spacer-200"></div> <!-- 100w x 200h --> 66 67 </div> 68 69 70 <div id="third-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport --> 71 72 <div class="vertical-spacer-200"></div> <!-- 100w x 200h --> 73 74 <div id="third-sticky" class="sticky"></div> <!-- 100w x 100h --> 75 76 <div class="vertical-spacer-200"></div> <!-- 100w x 200h --> 77 78 </div>