是否可以让子级浮动在垂直滚动上？
我有一个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>
回答 1
Stack Overflow用户
发布于 2019-05-23 06:28:29
绿色和黑色div上的top和left样式不做任何事情，因为div最初是非定位(静态)元素。
然后，我尝试使用position: absolute;添加悬停样式。为此，您仍然不需要在这里添加left或right来简单地将它弹出它当前所在的位置，因为它将相对于它的直接祖先(包含它的.blackdiv div )，所以它不会去任何地方。如果您确实想要将它移动到悬停时的其他位置，您必须考虑它的新位置，以及您的鼠标是否仍然悬停在它上面。我相信这是你的问题。
/* CSS */
div#listpanel {
width: 254px;
height: 580px;
overflow-y: scroll;
overflow-x: hidden;
}
div.blackdiv {
width: 500px;
height: 107px;
background: black;
}
div.greendiv {
width: 600px;
height: 20px;
background: green;
}
div.greendiv:hover {
background: red;
position: absolute;
}
<!-- HTML -->
<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>
</div> https://jsfiddle.net/yxd7mp4c/1/
更新：好的，当你向下滚动时，这个问题就会中断，这似乎是由于我上面提到的类似原因。当绿色的div变为absolute时，它认为它的父级位于页面加载时的位置，而不是滚动后的新位置，因此它会跳来跳去，您不再将鼠标悬停在它上面。您必须使用一些javascript来绑定悬停事件，并相对于scroll-y位置偏移弹出按钮的位置，以防止它四处移动。
https://stackoverflow.com/questions/56264814
复制相似问题