具有父元素padding-top的sticky定位

Question

我试图使用 position:sticky; 实现某些功能，但是出现了一些奇怪的行为。

.parent {
  display: inline-block;
  height: 300px;
  width: 300px;
  overflow: scroll;
  padding-top: 25px;
}

.parent--ok {
  background-color: green;
}

.parent--nok {
  background-color:red;
}


.sticky-header {
  position: sticky;
  top: 25px;
  background-color: purple;
}

<div class="parent parent--ok">
    <div class="sticky-header">Sticky</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 2</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 3</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 4</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
</div>

<div class="parent parent--nok">
    <div class="sticky-header">Sticky</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 2</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
</div>

我在这里做了一个 CodePen，希望你能够明白我的意思。

我有一个父元素，它的 padding-top: 25px;，里面有若干个未定义数量的 div 组成的对，包括标题和内容。我想要标题固定但仍然与父元素的 25px padding 相关联。因此，我给它们添加了 top: 25px;。奇怪的是，只有当我的父元素溢出时，这才起作用。如果没有溢出，我的标题上方会多出 25px 的空间，这不是我想要的。

以下是截图： 编辑：此内容在 Chrome 中测试过。

- Sonaryr

---

你的CodePen示例中，“Sticky”和“Sticky2”在两个版本中都显示在完全相同的级别上（顺便说一句：与你的问题相关的代码应该直接放入其中，而不是仅仅倾倒在外部网站上；[mcve]），所以我现在不知道你指的是什么了...？ - CBroe

我已经在这里添加了代码片段，谢谢。如果我在Chrome中打开它，红色和绿色父元素会显示不同。在Firefox中它们看起来相同。 - Sonaryr

这在我看来，使用当前版本的Firefox和Chrome浏览器表现完全一致。 - CBroe

我现在也添加了一张截图，我的Firefox和Chrome版本也是最新的，我正在运行Sierra操作系统的Mac。 - Sonaryr

不，就我这边而言，Chrome和Firefox的表现并不相同。 - PIIANTOM

Answer 1

"Sticky"有点棘手，因为它是固定和相对定位的混合体。对于粘性元素，如果使用与0值不同的顶部值，可能会导致奇怪的行为。我猜这就是你在Chrome浏览器中遇到的问题。

此外，不同的浏览器可能会有不同的行为（或者不会有）...... 我建议增加一个额外的容器（在示例中名为.holder），以保留这个上边距为25像素。 HTML"

<div class="parent parent--ok">
    <div class="holder">
    <div class="sticky-header">Sticky</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 2</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 3</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 4</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
        </div>
</div>

<div class="parent parent--nok">
    <div class="holder">
    <div class="sticky-header">Sticky</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 2</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    </div>
</div>

CSS (层叠样式表)

.parent {
  display: inline-block;
  height: 300px;
  width: 300px;
  padding-top: 25px;
}
.holder{
 height: 100%;
 overflow: scroll; 
}

.parent--ok {
  background-color: green;
}

.parent--nok {
  background-color:red;
}


.sticky-header {
  position: sticky;
  top: 0;
  background-color: purple;
}

这是 Jsfiddle。

- PIIANTOM