是否可以让子级浮动在垂直滚动上？
是否可以让子级浮动在垂直滚动上？
提问于 2019-05-23 04:49:05
我有一个html格式的列表，其中包含列表项和垂直滚动条，可用于溢出。该列表项的一个子项是停放在该列表项右角的图像。当鼠标悬停在它上面时，我想显示一个弹出按钮，它也是列表项中的子项。问题是弹出按钮被截断了，但我想让它浮动，并在鼠标悬停时显示在滚动条上。这有可能吗？我试图避免在列表项之外放置图像和弹出按钮，因为这意味着每次滚动并将其放置在列表项中时，我们都必须计算它的位置。而且，它是一个复杂的网页，已经启动并运行，所以我不想在列表和滚动条上浪费太多时间。
我为这个问题创建了一个更简单的test.html。在下面的代码中，假设我想让绿色块在鼠标悬停时越过滚动条。这有可能吗？
我试着使弹出框位置=绝对，试着overflow = visible，试着给出超大的z索引。
<style type="text/css">
div#listpanel {
width: 254px;
height: 1180px;
overflow-y: scroll;
overflow-x: hidden;
}
div.blackdiv {
left: 0px;
width: 500px;
height: 107px;
top: 20px;
background: black;
}
div.greendiv {
left: 180px;
top: 50px;
width: 600px;
height: 20px;
background: green;
}
</style>
<div id="listpanel">
<div role="list">
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
<div class="blackdiv" role="listitem">
<div class="greendiv">
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56264814
复制相关文章
相似问题
腾讯云开发者
