position-sticky-fixed-ancestor-iframe-child.html (904B)
1 <!DOCTYPE html> 2 <style> 3 body,html { 4 margin: 0; 5 width: 100%; 6 height: 100%; 7 } 8 9 .sticky { 10 background: green; 11 position: sticky; 12 bottom: 50vh; 13 width: 100px; 14 height: 10%; 15 } 16 17 .spacer { 18 height: 90%; 19 } 20 .long { 21 height: 600vh; 22 } 23 24 .position-parent { 25 position: absolute; 26 display: flex; 27 align-items: center; 28 justify-content: center; 29 width: 100%; 30 height: 100%; 31 top: 100vh; 32 background-color: lightgrey; 33 } 34 35 .container { 36 width: 100px; 37 height: 100%; 38 background-color: grey; 39 } 40 41 button { 42 position: fixed; 43 left: 20px; 44 top: 20px; 45 } 46 47 .fixed { 48 position: fixed; 49 top: 25vh; 50 } 51 </style> 52 53 <div class="position-parent"> 54 <div class="container"> 55 <div class="spacer"></div> 56 <div class="sticky"></div> 57 </div> 58 </div> 59 <div class="long"></div> 60 <button id="button">Toggle Fixed</button> 61 </html>