css - 当元素的位置属性为粘性时如何设置初始顶部位置

Question

我想用 top: 45px 设置 #box4 的初始位置，就像 #box3 相对于 #box2，但仍然保留 #box4 和 position: sticky，这使得它在向下滚动页面后处于同一级别。

初始位置，

滚动后，

html,
body {
  margin: 0;
  padding: 0;
  height: 1000px;
}

.box {
  width: 30px;
  height: 30px;
  border: 1px solid #bdbdbd;
}

#box1 {
  position: static;
}

#box2 {
  position: relative;
  left: 50px;
  top: -15px;
}

#box3 {
  position: fixed;
  top: 30px;
  left: 100px;
}

#box4 {
  position: sticky;
  top: 30px;
  left: 150px;
}

<div class="box" id="box1">
  B1 Static
</div>

<div class="box" id="box2">
  B2 Relative
</div>

<div class="box" id="box3">
  B3 Fixed
</div>

<div class="box" id="box4">
  B4 Sticky
</div>

Answer 1

一种可能的解决方法是使用负边距顶部将 #box4 定位到正确的位置。

#box4 {
  margin: -15px;
  position: sticky;
  top: 30px;
  left: 150px;
}