| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <meta name="fuzzy" content="1;0-50"> |
| <link rel="match" href="position-sticky-in-fixed-container-ref.html"> |
| <link rel="help" href="https://drafts.csswg.org/css-position-3/#sticky-pos"> |
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1854010"> |
| <style> |
| .modal { |
| bottom: 0; |
| left: 0; |
| right: 0; |
| position: fixed; |
| } |
| |
| .modal-dialog { |
| position: relative; |
| overflow: auto; |
| max-height: 400px; |
| transform: translateY(0); |
| } |
| |
| .modal-content { |
| background-color: purple; |
| height: 400px; |
| } |
| |
| .modal-footer { |
| height: 100px; |
| background-color: blue; |
| |
| position:sticky; |
| bottom: 0; |
| } |
| </style> |
| <div class="modal"> |
| <div class="modal-dialog"> |
| <div class="modal-content"></div> |
| <div class="modal-footer"></div> |
| </div> |
| </div> |
