如何在元素的position属性为sticky时设置初始顶部位置

Question

我希望将#box4的初始位置与top: 45px设置为#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;
}