position:sticky 在 :first-child 选择器上不起作用，这是怎么回事？答案

【问题标题】：position:sticky doesn't work on :first-child selector, what's going on?position:sticky 在 :first-child 选择器上不起作用，这是怎么回事？
【发布时间】：2018-01-12 00:24:46
【问题描述】：

问题是，我在其他地方看到过这种方法。所以它应该工作。我不知道出了什么问题，因为浏览器开发工具显示该位置设置为粘性，但它没有粘住。

JSFiddle https://jsfiddle.net/Slava_B/qr9tpLmh/

.parent {
  height: 1000px;
  width: 200px;
  position: relative;
  display: inline-block;
}

.position-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: rgba(200, 220, 255, 0.5);
}

.position-first-child-sticky {
  position: relative;
}

.position-first-child-sticky> :first-child {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: rgba(255, 220, 200, 0.5);
}

<div class="parent">
  <div class="position-sticky">I'm sticky</div>
</div>
<div class="parent">
  <div class="position-first-child-sticky">
    <div>I'm fist-child-sticky</div>
  </div>
</div>

【问题讨论】：

最新的 Firefox 和 Chrome...第二个“I'm first-child-sticky”是否也停留在您的浏览器中？

标签： css css-position sticky

【解决方案1】：

这是因为您的子元素 .position-first-child-sticky > :first-child 和它的父容器 .position-first-child-sticky 在 DOM 中的高度相同。

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold, at which point it is treated as fixed.

尝试在 .position-first-child-sticky 上添加一些高度，您会看到不同。

.parent {
  height: 1000px;
  width: 200px;
  position: relative;
  display: inline-block;
}

.position-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: rgba(200, 220, 255, 0.5);
}

.position-first-child-sticky {
  position: relative;
  height: 200px;
}

.position-first-child-sticky> :first-child {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: rgba(255, 220, 200, 0.5);
}

<div class="parent">
  <div class="position-sticky">I'm sticky</div>
</div>
<div class="parent">
  <div class="position-first-child-sticky">
    <div>I'm fist-child-sticky</div>
  </div>
</div>

【讨论】：

@Alph.Dev 粘性位置工作正常，但由于父元素和子元素在 DOM 中的高度相同，因此无法看到粘性效果。
对不起，你说得对。我删除了评论，因为它不再是真的。

【解决方案2】：

问题似乎是没有向.position-first-child-sticky 添加高度。如果您设置此1000px 的高度，则它可以工作。高度也可以设置为inherit

.position-first-child-sticky {
height: 1000px;
}

这是一个工作示例：

.parent{
  height: 1000px;
  width:200px;
  position:relative;
  display:inline-block;
}
.position-first-child-sticky {
height: 1000px;
}
.position-sticky{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  background:rgba(200,220,255,0.5);
}
.position-first-child-sticky{position:relative;}
.position-first-child-sticky > :first-child{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  background:rgba(255,220,200,0.5);
 }

<div class="parent">
  <div class="position-sticky">I'm sticky</div>
</div>
<div class="parent">
  <div class="position-first-child-sticky">
    <div>
      I'm fist-child-sticky
    </div>
  </div>
</div>

【讨论】：