position: sticky;の不具合なのか仕様なのか

Question

<div class="sticky-container">
  <div class="sticky">
    <p>スティッキー1</p>
  </div>
  <div class="sticky">
    <p>スティッキー2</p>
  </div>
  <div class="sticky">
    <p>スティッキー3</p>
  </div>
  <div class="sticky">
    <p>スティッキー4</p>
  </div>
</div>

>.sticky-container {
  >.sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    margin-bottom: 2000px;

    p {
      font-size: 18px;
    }

    &:nth-child(odd) {
      background-color: #dbdbdb;
    }

    &:nth-child(even) {
      background-color: #a9a9a9;
    }
  }
}

謎

上記は、各stickyアイテムのmargin-bottomに2000pxを指定しているのですが、なぜか3つ目のstickyアイテムでstickyの挙動が終わり、4つ目からは通常の挙動になっています。試しにstickyアイテムを一つ追加すると4つ目のstickyアイテムでstickyの挙動が終わり、5つ目からは通常の挙動になったので、最後のstickyアイテムが通常の挙動になるということが分かりました。これは仕様なのか、バグなのか、なんなのでしょうか。。

Answer 1

親子間マージン相殺が原因かと思います。
解決法は以下の通りです。

>.sticky-container {
    display: flow-root; /* 追加 */

---

参考：
[CSS]marginの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック | コリス

Comments

[kylojin]

Lhankor_Mhy様の回答通りdisplay: flow-root;を指定したら、意図した挙動になりました。ですが仕組みが分からないので申し訳ないですが詳しく教えていただきたいです。相殺が原因という意味が分からないです。。そもそも親である.sticky-containerにmarginはつけていないので、相殺は起こらないのではないのでしょうか。(添付記事読ませていただきました。質問とは関係なく勉強になりました。ありがとうございます。)

[Lhankor_Mhy]

親子間マージン相殺は、「相殺」と呼ばれていますが、子要素のマージンが親要素を突き抜ける現象です。
.stickyの4つ目のmargin-bottomが、.sticky-containerを突き抜けているので、その分だけ.sticky-containerが小さくなっています。

>.sticky-container {
display: flow-root;
outline: 1px solid #000;

などとしてみて、display: flow-root;を付け外ししてみると、起きてることが理解しやすいと思います。

Answer 2

margin-bottomではなくmargin-topで対応してみては？

<style>
.sticky-container {
  .sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    background-color: #a9a9a9;
    p {
      font-size: 18px;
    }
  }
  .sticky:not(:first-child) {
    margin-top: 100vh;
  }
  :nth-child(odd of .sticky) {
    background-color: #dbdbdb;
  }
}
</style>
<div class="sticky-container">
  <div class="sticky"><p>スティッキー1</p></div>
  <div class="sticky"><p>スティッキー2</p></div>
  <div class="sticky"><p>スティッキー3</p></div>
  <div class="sticky"><p>スティッキー4</p></div>
</div>

Comments

[kylojin]

そうなんです。margin-top指定だと意図した挙動になるんですけど、なぜbottomだとおかしくなるのか原因が知りたく。。