position-sticky-in-fixed-container.html (867B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width,initial-scale=1"> 4 <link rel="match" href="position-sticky-in-fixed-container-ref.html"> 5 <link rel="help" href="https://drafts.csswg.org/css-position-3/#sticky-pos"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1854010"> 7 <style> 8 .modal { 9 bottom: 0; 10 left: 0; 11 right: 0; 12 position: fixed; 13 } 14 15 .modal-dialog { 16 position: relative; 17 overflow: auto; 18 max-height: 400px; 19 transform: translateY(0); 20 } 21 22 .modal-content { 23 background-color: purple; 24 height: 400px; 25 } 26 27 .modal-footer { 28 height: 100px; 29 background-color: blue; 30 31 position:sticky; 32 bottom: 0; 33 } 34 </style> 35 <div class="modal"> 36 <div class="modal-dialog"> 37 <div class="modal-content"></div> 38 <div class="modal-footer"></div> 39 </div> 40 </div>