Blitz - WPT: position-sticky-padding-002.html

wpt / css / css-position / sticky / position-sticky-padding-002.html

/css/css-position/sticky/position-sticky-padding-002.html

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="help" href="https://drafts.csswg.org/css-position/#sticky-pos">
<link rel="help" href="https://bugzil.la/1882091">
<link rel="match" href="position-sticky-padding-002-ref.html">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<style>
  .flex,
  .block {
    position: relative;
    width: 200px;
    height: 300px;
    padding: 10px;
    margin: 10px;
    float: left;
    overflow: auto;
    scrollbar-width: none;
    background-color: #ddd;
  }

  .flex {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
  }

  .row {
    height: 100px;
    background-color: blue;
  }

  .row-1 {
    position: sticky;
    min-width: 300px;
    left: 0;
  }

  .row-2 {
    width: 20px;
    align-self: start;
    background-color: purple;
  }
  .abspos {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: cyan;
    left: 600px;
    top: 0;
  }
</style>
<div class="flex">
  <div class="row row-1"></div>
  <div class="row row-2"></div>
  <div class="abspos"></div>
</div>
<div class="block">
  <div class="row row-1"></div>
  <div class="row row-2"></div>
  <div class="abspos"></div>
</div>
<script>
onload = function() {
  for (let e of document.querySelectorAll('.flex,.block')) {
    e.scrollLeft = 100000;
  }
};
</script>

/css/css-position/sticky/position-sticky-padding-002-ref.html

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .block {
    position: relative;
    width: 210px;
    height: 300px;
    padding: 10px;
    padding-left: 0;
    margin: 10px;
    float: left;
    background-color: #ddd;
  }

  .row {
    height: 100px;
    width: 210px;
    background-color: blue;
  }

  .abspos {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: cyan;
    top: 0;
    left: 210px;
  }
</style>
<div class="block">
  <div class="row"></div>
  <div class="abspos"></div>
</div>
<div class="block">
  <div class="row"></div>
  <div class="abspos"></div>
</div>