絕對位置的孩子相對於滾動祖父母

Question

我有一個UL和裏面的李，我有一個孩子的div。當我在ul內滾動時，我想讓div div保持相對於ul的位置。我能夠在ul和li上使用靜態位置獲得所需的結果，但是當我將ul和li的位置更改爲相對時，它不起作用。

<ul class="grandparent"> 
    <li class="parent"> 
     <div class="child"> 
     Child 
     </div> 
     <div > 
     <div> 
     Spam 
     </div> 
     <div> 
     Spam 
     </div> 
    <div> 
     Spam 
     </div> 
    <div> 
     Spam 
     </div> 
     </div> 
    </li> 
    <li> 
     <div> 
     Spam 
     </div> 
     <div> 
     Spam 
     </div> 
    <div> 
     Spam 
     </div> 
    <div> 
     Spam 
     </div> 
     </div> 
    </li> 
    </ul> 

這裏的工作副本 https://jsfiddle.net/4jhzfm1s/1/

所以我的問題是，我怎麼能同時具有UL和李爲相對定位的得到想要的效果的鏈接。

Answer 1

因此，您希望.child保持在哪裏，無論您向何處滾動？如果是這樣的情況下，我想包在一個div的ul並給予position: relative如下：

.wrapper { 
 
    position: relative; 
 
} 
 
.grandparent{ 
 
    height:100px; 
 
    overflow:auto; 
 
} 
 
.child{ 
 
    position:absolute; 
 
    top:50px; 
 
    left:50%; 
 
}

<div class="wrapper"> 
 
    <ul class="grandparent"> 
 
    <li class="parent"> 
 
     <div class="child"> 
 
     Child 
 
     </div> 
 
     <div > 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

如果您父滾動，只保留祖父母在相對的，它按預期工作：

.grandparent { 
 
    position: relative; 
 
} 
 
.parent { 
 
    height: 100px; 
 
    overflow: auto; 
 
} 
 
.child { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50%; 
 
}

<ul class="grandparent"> 
 
    <li class="parent"> 
 
    <div class="child"> 
 
     Child 
 
    </div> 
 
    <div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
     <div> 
 
     Spam 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ul>

你也可以設置top：auto和margin-top：50px，所以你可以有多個元素設置爲絕對（類似固定）example https://jsfiddle.net/4jhzfm1s/3/