position-sticky-fixed-ancestor-003.html (912B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Positioned Layout Test: a sticky element inside a fixed ancestor</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="match" href="reference/position-sticky-fixed-ancestor-002-ref.html"> 9 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos"> 10 11 <meta name="flags" content=""> 12 13 <style> 14 html, body, div 15 { 16 height: 100%; 17 margin: 0; 18 width: 100%; 19 } 20 21 div#fixed-container 22 { 23 background-color: red; 24 color: yellow; 25 font-size: 40vh; 26 position: fixed; 27 } 28 29 div#sticky 30 { 31 background-color: green; 32 bottom: 0; 33 color: white; 34 position: sticky; 35 } 36 </style> 37 38 <div id="fixed-container"> 39 40 <div id="vertical-spacer">FAIL</div> 41 42 <div id="sticky">PASS</div> 43 44 </div>