position-sticky-padding-002.html (1523B)
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-002-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: 200px; 14 height: 300px; 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: column; 26 align-items: start; 27 justify-content: space-between; 28 } 29 30 .row { 31 height: 100px; 32 background-color: blue; 33 } 34 35 .row-1 { 36 position: sticky; 37 min-width: 300px; 38 left: 0; 39 } 40 41 .row-2 { 42 width: 20px; 43 align-self: start; 44 background-color: purple; 45 } 46 .abspos { 47 position: absolute; 48 width: 10px; 49 height: 10px; 50 background-color: cyan; 51 left: 600px; 52 top: 0; 53 } 54 </style> 55 <div class="flex"> 56 <div class="row row-1"></div> 57 <div class="row row-2"></div> 58 <div class="abspos"></div> 59 </div> 60 <div class="block"> 61 <div class="row row-1"></div> 62 <div class="row row-2"></div> 63 <div class="abspos"></div> 64 </div> 65 <script> 66 onload = function() { 67 for (let e of document.querySelectorAll('.flex,.block')) { 68 e.scrollLeft = 100000; 69 } 70 }; 71 </script>