position-sticky-padding-001.html (1573B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <link rel="help" href="https://drafts.csswg.org/css-position/#sticky-pos"> 5 <link rel="help" href="https://bugzil.la/1882091"> 6 <link rel="match" href="position-sticky-padding-001-ref.html"> 7 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 8 <link rel="author" href="https://mozilla.org" title="Mozilla"> 9 <style> 10 .flex, 11 .block { 12 position: relative; 13 width: 300px; 14 height: 200px; 15 padding: 10px; 16 margin: 10px; 17 float: left; 18 overflow: auto; 19 scrollbar-width: none; 20 background-color: #ddd; 21 } 22 23 .flex { 24 display: flex; 25 flex-direction: row; 26 align-items: start; 27 justify-content: space-between; 28 } 29 30 .col { 31 width: 100px; 32 background-color: blue; 33 } 34 35 .col-1 { 36 position: sticky; 37 min-height: 300px; 38 top: 0; 39 } 40 41 .col-2 { 42 height: 20px; 43 align-self: start; 44 background-color: purple; 45 } 46 .block .col-2 { 47 float: right; /* Just make it visible */ 48 } 49 .abspos { 50 position: absolute; 51 width: 10px; 52 height: 10px; 53 background-color: cyan; 54 top: 600px; 55 } 56 </style> 57 <div class="flex"> 58 <div class="col col-1"></div> 59 <div class="col col-2"></div> 60 <div class="abspos"></div> 61 </div> 62 <div class="block"> 63 <div class="col col-2"></div> 64 <div class="col col-1"></div> 65 <div class="abspos"></div> 66 </div> 67 <script> 68 onload = function() { 69 for (let e of document.querySelectorAll('.flex,.block')) { 70 e.scrollTop = 100000; 71 } 72 }; 73 </script>