李在ipad上绝对定位于溢出ul滚动

Question

我有一个ul和(第一个) li的绝对位置。ul有一个溢出-y，当我向下滚动第一个li，停留在那里，因为它的位置是绝对的。

<div>
<ul style="overflow-y:scroll; max-height:80px;">
    <li>CAt 1</li>
    <li><img src="../adsf.jpg">Content1</li></li>
    <li><img src="../adsf.jpg">Content2</li></li>
    <li><img src="../adsf.jpg">Content3</li></li>
    <li><img src="../adsf.jpg">Content4</li></li>
    <li><img src="../adsf.jpg">Content5</li></li>
</ul>    
</div>

但是当我在ipad上测试这个时，所有的元素都向下滚动，包括第一个。下面是一个小提琴，预先说明了情况，谢谢

Answer 1

尝试使位置相对于ul的包含div，而不是ul。这意味着要定位:相对于ul，并将其放到div上。

CSS

#listContianer {
    position: relative;
}

#listContianer ul {/* no positioning here */}

#listContainer .fixedList {
    position: absolute;
    top: 2em;
    left: 1em;
}

HTML

<div id="listContainer">
<ul style="overflow-y:scroll; max-height:80px;">
    <li class="fixedList">CAt 1</li>
    <li><img src="../adsf.jpg">Content1</li></li>
    <li><img src="../adsf.jpg">Content2</li></li>
    <li><img src="../adsf.jpg">Content3</li></li>
    <li><img src="../adsf.jpg">Content4</li></li>
    <li><img src="../adsf.jpg">Content5</li></li>
</ul>    
</div>

您将不得不重新调整顶部和左边的价值，以适应您的造型。但要确保移除ul上的任何位置。

或尝试将顶部列表项作为直接位于div中的另一个元素

<div id="listContainer">
    <span class="fixedList">CAt 1</span>
    <ul style="overflow-y:scroll; max-height:80px;">
        <li><img src="../adsf.jpg">Content1</li></li>
        <li><img src="../adsf.jpg">Content2</li></li>
        <li><img src="../adsf.jpg">Content3</li></li>
        <li><img src="../adsf.jpg">Content4</li></li>
        <li><img src="../adsf.jpg">Content5</li></li>
    </ul>    
</div>

你必须给ul一些顶垫，这样新的第一项就不包括在内了。

#listContianer ul {
    top-padding: 2em;
}