position-sticky-fixed-ancestor-002.html (1110B)
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#positioned-container 22 { 23 background-color: red; 24 color: yellow; 25 font-size: 40vh; 26 position: absolute; 27 } 28 29 div#sticky 30 { 31 background-color: green; 32 bottom: 0; 33 color: white; 34 position: sticky; 35 } 36 </style> 37 38 <script type="text/javascript"> 39 function startTest() 40 { 41 document.getElementById("positioned-container").style.position = "fixed"; 42 } 43 </script> 44 45 <body onload="startTest();"> 46 47 <div id="positioned-container"> 48 49 <div id="vertical-spacer">FAIL</div> 50 51 <div id="sticky">PASS</div> 52 53 </div>