position-sticky-top-002-ref.html (2010B)
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 top: 0px; 36 } 37 38 div#second-sticky 39 { 40 top: 100px; 41 } 42 43 div#third-sticky 44 { 45 top: 100px; 46 } 47 </style> 48 49 <body onload="document.getElementById("first-scrolling-container").scrollTop = 50; document.getElementById("second-scrolling-container").scrollTop = 200; document.getElementById("third-scrolling-container").scrollTop = 300;"> 50 51 <p>Test passes if there are 3 filled green squares and <strong>no red</strong>. 52 53 <div id="first-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport --> 54 55 <div class="vertical-spacer-200"></div> <!-- 100w x 200h --> 56 57 <div id="first-sticky" class="sticky"></div> <!-- 100w x 100h --> 58 59 <div class="vertical-spacer-200"></div> <!-- 100w x 200h --> 60 61 </div> 62 63 64 <div id="second-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport --> 65 66 <div class="vertical-spacer-200"></div> <!-- 100w x 200h --> 67 68 <div id="second-sticky" class="sticky"></div> <!-- 100w x 100h --> 69 70 <div class="vertical-spacer-200"></div> <!-- 100w x 200h --> 71 72 </div> 73 74 75 <div id="third-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport --> 76 77 <div class="vertical-spacer-200"></div> <!-- 100w x 200h --> 78 79 <div id="third-sticky" class="sticky"></div> <!-- 100w x 100h --> 80 81 <div class="vertical-spacer-200"></div> <!-- 100w x 200h --> 82 83 </div>