如何設置初始頂部位置，當元素的位置屬性是粘

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

一種可能的工作不要蜘蛛d是使用負邊距頂部將#box4放置在正確的位置。

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