为什么保证金用于粘性定位

Question

看这个例子

.container {
  width: 500px;
  margin: auto;
}

.container section h2 {
  position: sticky;
  top: 0;
  bottom: 0;
  padding-top: calc(1em / 6 * 5);
  padding-bottom: calc(1em / 6 * 5);
  background-color: #fff;
}

<div class="container">
  <section>
    <h2>Lorem, ipsum dolor.</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi perferendis animi sint ducimus ullam earum aliquid consequatur dolores delectus. Ex unde mollitia placeat vitae incidunt voluptatibus qui earum deleniti cupiditate.</p>
    <p>Delectus tenetur alias numquam magni! Magnam perspiciatis ducimus vero facere, totam non odit accusamus nisi dicta deserunt distinctio minus rerum maiores magni, eligendi vitae, a omnis autem deleniti quaerat officiis.</p>
    <p>At iusto architecto aut laudantium nisi quod praesentium dolorem delectus repudiandae soluta enim consequatur porro, quam nemo cumque sint aspernatur laborum deleniti. Molestiae, dolor saepe quisquam suscipit quod aliquid dolore.</p>
    <p>Autem perspiciatis ipsam molestias inventore nulla? Nostrum voluptatibus unde autem est. Minus quam molestias ullam cupiditate laborum eius. Nulla unde repellat mollitia dolore aliquam aspernatur velit sit dolorem quibusdam repudiandae.</p>
    <p>Illum dicta inventore, adipisci veritatis nobis placeat ab quas nihil est, incidunt reprehenderit quibusdam odio non autem expedita ex quos dolorum? Et fuga facere obcaecati laborum fugiat praesentium, aliquid in.</p>
  </section>
  <section>
    <h2>Quisquam, consequuntur quibusdam.</h2>
    <p>Similique quas impedit est iure quisquam! Hic cumque illo ipsam, itaque fugiat, et commodi enim aliquam quos minima nihil quae sapiente vero amet magni. Ipsum sint maiores necessitatibus eos optio!</p>
    <p>Odit, assumenda. Non harum perspiciatis delectus sint, molestias nostrum laboriosam labore accusantium mollitia assumenda officia omnis rerum dolorum veritatis impedit sapiente, ea, reprehenderit voluptatem! Minus dolor aspernatur illo velit sit.</p>
    <p>Recusandae qui repellat debitis non aliquam ea quod quam, magnam ipsum placeat vitae? Ut, nisi eos consequatur voluptatibus sit nulla corporis omnis quae repellendus, voluptates sapiente, labore quibusdam deleniti molestias.</p>
    <p>Assumenda dolor ex, numquam reprehenderit ipsa, nihil aperiam reiciendis aliquam eaque et harum mollitia fugit amet repellendus! Suscipit, veritatis cum. Corporis saepe, adipisci officia numquam obcaecati voluptatem. Fugit, amet quia!</p>
    <p>Fugiat, quaerat harum id aliquam repellat dolor assumenda eos provident reprehenderit excepturi! Tempore nisi animi sequi repellat perferendis deserunt incidunt natus quae harum minima, fuga id repellendus? Amet, beatae accusamus?</p>
  </section>
  <section>
    <h2>Eos, harum nobis.</h2>
    <p>Delectus, eius provident vel hic veritatis quidem cumque unde ratione quia eaque non iusto. Ad veniam quidem molestias minima, labore, pariatur, tempore qui sequi quaerat suscipit itaque animi adipisci tempora!</p>
    <p>Atque dolor earum distinctio sit labore quae, animi pariatur quibusdam voluptatem velit. Quisquam ad, cum repellendus enim illo esse dolor qui perferendis voluptate in, beatae aspernatur at doloremque exercitationem assumenda.</p>
    <p>Sunt unde veritatis repudiandae culpa ipsum. Vero ipsam eveniet voluptatum quis, necessitatibus adipisci nisi, ad excepturi mollitia temporibus eaque repellendus blanditiis rerum itaque, consequatur ea eligendi ullam nam officia. Veniam.</p>
    <p>Nihil vitae aut magni, repellat itaque consequatur corporis praesentium libero aperiam quasi ea quaerat quisquam, repudiandae quis ipsam ratione totam quod? Quasi, debitis! Harum illo exercitationem totam debitis sunt nulla!</p>
    <p>Pariatur ex est hic nesciunt ullam et molestias ducimus consectetur, odio maxime voluptas quos magnam asperiores, quaerat totam facilis perspiciatis id ut facere nam doloremque quis dolores distinctio iure! Nobis.</p>
  </section>
  <section>
    <h2>Minima, magni minus.</h2>
    <p>Rem ullam doloribus voluptatem suscipit minima perspiciatis adipisci, iure dolorem? Voluptatibus vitae nulla repudiandae consequatur ut culpa rem magni quia fugiat provident quae explicabo recusandae non rerum, saepe porro. Dolorum?</p>
    <p>Mollitia amet neque architecto necessitatibus reiciendis earum esse veritatis, sunt magni repudiandae animi asperiores eligendi veniam non, nam quis, nobis aspernatur odit modi sapiente velit? Eum quis facere quidem esse!</p>
    <p>Ea omnis atque similique reiciendis, incidunt voluptatem aliquam totam qui temporibus velit distinctio corrupti excepturi, cupiditate fuga optio natus illo aut obcaecati minima sint, dolorum provident? Architecto nisi iure debitis.</p>
    <p>Odit impedit cum magnam pariatur corporis voluptatum numquam quae rerum qui nesciunt, architecto, voluptas culpa dolore doloremque. Eius vitae quasi corporis ipsum facilis voluptate. Beatae repellat molestiae eum autem nobis.</p>
    <p>Nulla consectetur, recusandae error dolorum ad enim vel placeat esse, voluptatum est, et dignissimos autem laudantium ut. Neque voluptate vitae quasi veniam dolore excepturi, atque exercitationem in nihil eius velit.</p>
  </section>
</div>

如果你向下滚动，你会看到，所有的<h2>元素对于包含<section>元素都是粘性的。但是...... h1并没有覆盖粘性<p>下面的所有静态<h2>元素。 “非重叠”的数量恰好是底部边距（0.83em至少在FF和Chrome上）。

据我所知，我只能通过将margin-bottom: 0分配给<h2>来防止这个问题。但是我不希望这样，因为那时我失去了与以下<p>元素的边缘崩溃。 （是的，我知道，我可以以某种方式绕过这个，但我拒绝）

<h2>已经将margin-top与该部分（如果有任何定义）折叠，只要该元素不是“粘性”，但它具有非折叠的margin-bottom，如果滚动，则它是粘性的。

Margin-collapse, when <h2> is NOT sticky

No margin-collapse, when <h2> IS sticky

1. 为什么会这样？
2. 在规范中是这样的吗？
3. 谁决定这个？
4. 这对我现在想不到的任何情况都有用吗？
5. 是否有任何解决方法不涉及将margin-bottom的<h2>设置为零？

Answer 1

是的，这是在这里的说明：https://www.w3.org/TR/css-position-3/#sticky-pos。

以下是相关部分：

当计算粘性定位元件在其包含块内的容器时，考虑粘性定位元件上的边缘。

这在某种程度上是合乎逻辑的，因为我们的粘性元素将表现为相对的，其边距将影响包含块的高度，因此也应该考虑它。

考虑粘性元素是包含块内唯一元素的示例

.wrapper {
  border:2px solid;
}

.wrapper > div {
  position:sticky;
  top:0;
  height:50px;
  margin-bottom:150vh;
  background:red;
}

<div class="wrapper">
  <div></div>
</div>

在这种情况下应该没有粘性行为，因为我们的元素（带有边距）已经触及包含块的边缘。

---

这就是说，一个解决方法是在视觉上增加元素的空间，同时保持另一个元素之间的相同距离。为此，我们添加一个具有特定高度的隐藏元素，并以负边距进行纠正。

这是一个例子：

.container {
  width: 500px;
  margin: auto;
}

.container section h2 {
  position: sticky;
  top: 0;
  bottom: 0;
  padding-top: calc(1em / 6 * 5);
  padding-bottom: calc(1em / 6 * 5);
  background-color: #fff;
}

.container section {
  margin-bottom:calc(1.5 * -0.83em);
}
.container section:after {
  content:"";
  display:block;
  font-size: 1.5em;
  height:0.83em;
}

<div class="container">
  <section>
    <h2>Lorem, ipsum dolor.</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi perferendis animi sint ducimus ullam earum aliquid consequatur dolores delectus. Ex unde mollitia placeat vitae incidunt voluptatibus qui earum deleniti cupiditate.</p>
    <p>Delectus tenetur alias numquam magni! Magnam perspiciatis ducimus vero facere, totam non odit accusamus nisi dicta deserunt distinctio minus rerum maiores magni, eligendi vitae, a omnis autem deleniti quaerat officiis.</p>
    <p>At iusto architecto aut laudantium nisi quod praesentium dolorem delectus repudiandae soluta enim consequatur porro, quam nemo cumque sint aspernatur laborum deleniti. Molestiae, dolor saepe quisquam suscipit quod aliquid dolore.</p>
    <p>Autem perspiciatis ipsam molestias inventore nulla? Nostrum voluptatibus unde autem est. Minus quam molestias ullam cupiditate laborum eius. Nulla unde repellat mollitia dolore aliquam aspernatur velit sit dolorem quibusdam repudiandae.</p>
    <p>Illum dicta inventore, adipisci veritatis nobis placeat ab quas nihil est, incidunt reprehenderit quibusdam odio non autem expedita ex quos dolorum? Et fuga facere obcaecati laborum fugiat praesentium, aliquid in.</p>
  </section>
  <section>
    <h2>Quisquam, consequuntur quibusdam.</h2>
    <p>Similique quas impedit est iure quisquam! Hic cumque illo ipsam, itaque fugiat, et commodi enim aliquam quos minima nihil quae sapiente vero amet magni. Ipsum sint maiores necessitatibus eos optio!</p>
    <p>Odit, assumenda. Non harum perspiciatis delectus sint, molestias nostrum laboriosam labore accusantium mollitia assumenda officia omnis rerum dolorum veritatis impedit sapiente, ea, reprehenderit voluptatem! Minus dolor aspernatur illo velit sit.</p>
    <p>Recusandae qui repellat debitis non aliquam ea quod quam, magnam ipsum placeat vitae? Ut, nisi eos consequatur voluptatibus sit nulla corporis omnis quae repellendus, voluptates sapiente, labore quibusdam deleniti molestias.</p>
    <p>Assumenda dolor ex, numquam reprehenderit ipsa, nihil aperiam reiciendis aliquam eaque et harum mollitia fugit amet repellendus! Suscipit, veritatis cum. Corporis saepe, adipisci officia numquam obcaecati voluptatem. Fugit, amet quia!</p>
    <p>Fugiat, quaerat harum id aliquam repellat dolor assumenda eos provident reprehenderit excepturi! Tempore nisi animi sequi repellat perferendis deserunt incidunt natus quae harum minima, fuga id repellendus? Amet, beatae accusamus?</p>
  </section>
  <section>
    <h2>Eos, harum nobis.</h2>
    <p>Delectus, eius provident vel hic veritatis quidem cumque unde ratione quia eaque non iusto. Ad veniam quidem molestias minima, labore, pariatur, tempore qui sequi quaerat suscipit itaque animi adipisci tempora!</p>
    <p>Atque dolor earum distinctio sit labore quae, animi pariatur quibusdam voluptatem velit. Quisquam ad, cum repellendus enim illo esse dolor qui perferendis voluptate in, beatae aspernatur at doloremque exercitationem assumenda.</p>
    <p>Sunt unde veritatis repudiandae culpa ipsum. Vero ipsam eveniet voluptatum quis, necessitatibus adipisci nisi, ad excepturi mollitia temporibus eaque repellendus blanditiis rerum itaque, consequatur ea eligendi ullam nam officia. Veniam.</p>
    <p>Nihil vitae aut magni, repellat itaque consequatur corporis praesentium libero aperiam quasi ea quaerat quisquam, repudiandae quis ipsam ratione totam quod? Quasi, debitis! Harum illo exercitationem totam debitis sunt nulla!</p>
    <p>Pariatur ex est hic nesciunt ullam et molestias ducimus consectetur, odio maxime voluptas quos magnam asperiores, quaerat totam facilis perspiciatis id ut facere nam doloremque quis dolores distinctio iure! Nobis.</p>
  </section>
  <section>
    <h2>Minima, magni minus.</h2>
    <p>Rem ullam doloribus voluptatem suscipit minima perspiciatis adipisci, iure dolorem? Voluptatibus vitae nulla repudiandae consequatur ut culpa rem magni quia fugiat provident quae explicabo recusandae non rerum, saepe porro. Dolorum?</p>
    <p>Mollitia amet neque architecto necessitatibus reiciendis earum esse veritatis, sunt magni repudiandae animi asperiores eligendi veniam non, nam quis, nobis aspernatur odit modi sapiente velit? Eum quis facere quidem esse!</p>
    <p>Ea omnis atque similique reiciendis, incidunt voluptatem aliquam totam qui temporibus velit distinctio corrupti excepturi, cupiditate fuga optio natus illo aut obcaecati minima sint, dolorum provident? Architecto nisi iure debitis.</p>
    <p>Odit impedit cum magnam pariatur corporis voluptatum numquam quae rerum qui nesciunt, architecto, voluptas culpa dolore doloremque. Eius vitae quasi corporis ipsum facilis voluptate. Beatae repellat molestiae eum autem nobis.</p>
    <p>Nulla consectetur, recusandae error dolorum ad enim vel placeat esse, voluptatum est, et dignissimos autem laudantium ut. Neque voluptate vitae quasi veniam dolore excepturi, atque exercitationem in nihil eius velit.</p>
  </section>
</div>

你应该只关注涉及与最后一个孩子进行边缘折叠的复杂情况，因为添加这个额外元素会禁用它。您可能需要增加更多的负利润。

Answer 2

查看我的屏幕截图，了解为什么你的h2不会超过你的最后一行。

在蓝色，你可以看到你<section>

在这里你的h2

所以，你的h2不能超过最后一行，因为保证金推高你的头衔。

编辑：如果你在h2下绝对需要这个空间，你可以在<p>之后将margin-top放到第一个h2 ...

h2 + p:first-of-type{
  margin-top:10px;
}