位置粘性在屏幕调整大小时不会保持居中对齐

Question

我注意到居中对齐（垂直）位置粘滞的元素在屏幕宽度减少一定程度后开始分解，具体取决于该元素的宽度。与 position: fixed 不同，粘性元素最终会卡住并失去其中心对齐。

知道为什么会发生这种情况以及解决方法吗？

div {
  height: 100px;
  width: 500px;
  background-color: red;
  position: sticky;
  left: 50%;
  transform: translateX(-50%);
}

<div>
</div>

Answer 1

您可以通过在父级 class 上使用 flex 并使用 justify-content

来实现

示例：https://jsfiddle.net/9cp6borj/

<body>
  <div class="div__item">
    <div class="div__sticky">
    </div>
  </div>
</body>
<style>
.div__item {
  display:flex;
  justify-content:center;
}
.div__sticky {
  height: 100px;
  width: 500px;
  background-color: red;
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}
</style>

位置粘性在屏幕调整大小时不会保持居中对齐

Position sticky does not remain centrally aligned upon screen resize

html

css

sticky