Question

在除Safari以外的所有现代浏览器（Edge，FF，Chrome）中，如果我将position: -webkit-sticky; position: sticky;应用于div，然后将display: inline应用于其父级，则它的父级和将随视口（或其任何滚动容器）滚动。

为什么即使父元素不是包含块或滚动容器的情况，Safari也会将粘性元素锚定到父元素？这是错误吗？由于规格模糊而导致的变化？有解决方法吗？

#content {
  background-color: blue;
  height: 150vh;
}

#header {
  background-color: green;
  height: 50px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

#sub-headers {
  display: inline;
  overflow: visible;
}

#title-bar {
  background-color: red;
  height: 25px;
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
}

<div id="header"></div>
<div id="sub-headers">
  <div id="title-bar"></div>
</div>
<div id="content"></div>

请参见Safari `position: -webkit-sticky` sticks to inline parent上的Kaushik Ganguly（@kganguly）的钢笔CodePen。

为何Safari的“位置：-webkit-sticky”坚持内嵌父级？

0 个答案: