为什么边距用于粘性定位
查看此示例
[array([4, 3, 2, 1]), array([6, 4, 3])]
.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>元素上。但是…h1不会在粘滞<section>下面覆盖所有静态<p>元素。 “不重叠” 的数量恰好是底边距（至少在FF和Chrome上为<h2>）。
据我所知，我只能通过将0.83em分配给margin-bottom: 0来防止此问题。但是我不想要那样，因为那样我就会失去与以下<h2>元素的边际收缩。 （是的，我知道，我可以以某种方式解决这个问题，但我拒绝）
只要元素不是'sticky'，但<p>与该部分的<h2>一起折叠（如果有定义的话）， margin-top（如果滚动），使其具有粘性。
不粘滞时的边际折叠
当具有粘性时，没有边距折叠
- 为什么会这样？
- 规格中是否是这样？
- 谁决定的？
- 在我现在想不起来的任何情况下，这有用吗？
- 是否有不涉及将
margin-bottom的{{1}}设置为零的解决方法？
2 个答案:
答案 0 :(得分：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>
您只需要注意复杂的情况，即与最后一个孩子发生边际冲突，因为添加此额外元素会禁用它。您可能需要增加更多的负边距。
答案 1 :(得分：0)
请参阅我的屏幕截图，以了解为什么您的class Custom_Walker_Page extends Walker_page {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
{
//You can make your change here
}
}
不能超过最后一行。
以蓝色显示$args = array(
.....
.....
'walker' => new Custom_Walker_page()
这是您的h2
因此，您的<section>不能超过最后一行，因为空白会增加标题的标题。
编辑：如果您绝对需要h2下的该空间，则可以在h2之后的第一个h2处放置页边距顶部...
<p>- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？