2016-06-07 104 views
0

我有一个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和李为相对定位的得到想要的效果的链接。

回答

0

因此,您希望.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>

1

如果您父滚动,只保留祖父母在相对的,它按预期工作:

.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/

+0

会有更多的li,所以我必须保持滚动到祖父 –

+0

@ LunZhang **所以你需要在ul **附加一个额外的包装,否则位置:sticky;会做(或一个js plolyfill)或专用脚本),但我相信CSS粘性工作实际上只在Firefox(铬我不知道,一旦它,然后没有更多) –

+1

我会尝试添加额外的包装ul –

相关问题