Html 是否可以在垂直滚动上浮动一个子对象？

我有一个html列表，其中有列表项和垂直滚动条是为溢出启用。列表项的子项之一是位于列表项右角的图像。当鼠标悬停在上面时，我想显示一个弹出型按钮，它也是列表项中的一个子项。问题是弹出按钮会被切碎，但我希望它浮动并在鼠标悬停时显示在滚动条上。有可能吗？我试图避免将图像和弹出按钮放置在列表项之外，因为这意味着我们必须在每次滚动并将其当前放置在列表项中时计算其位置。另外，它是一个已经启动并运行的复杂网页，所以我不想在列表和滚动条上乱搞太多

为了解决这个问题，我创建了一个更简单的test.html。 在下面的代码中，假设我想让绿色块在鼠标悬停时通过滚动条。有可能吗

我试着让弹出按钮的位置=绝对，试着溢出=可见，试着给出非常大的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#列表面板{
宽度：254px；
高度：1180px；
溢出y：滚动；
溢出x：隐藏；
}
布莱克迪夫{
左：0px；
宽度：500px；
高度：107px；
顶部：20px；
背景：黑色；
}
格林迪夫{
左：180像素；
顶部：50px；
宽度：600px；
高度：20px；
背景：绿色；
}

---

绿色和黑色div上的

顶部

和

左侧

样式无效，因为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>  

/*CSS*/
div#列表面板{
宽度：254px；
高度：580px；
溢出y：滚动；
溢出x：隐藏；
}
布莱克迪夫{
宽度：500px；
高度：107px；
背景：黑色；
}
格林迪夫{
宽度：600px；
高度：20px；
背景：绿色；
}
div.greendiv:悬停{
背景：红色；
位置：绝对位置；
}


更新：好的，当你向下滚动时，它会中断，这似乎是由于我上面提到的类似原因。当绿色div变为
绝对值时
，它认为其父级位于页面加载时的位置，而不是滚动后的新位置，因此它会四处跳跃，您不再在其上悬停。您必须使用一些javascript来绑定悬停事件，并偏移弹出按钮相对于scroll-y位置的位置，以防止其四处移动
 注意：如果添加代码，则必须将其格式化为代码或将其放入“代码段”。其他用户可能看不到它。我相应地编辑了你的代码…天哪，这是很多内联样式\谢谢你，约翰！欣赏它。这里有一个更容易阅读的标记位置版本：绝对作品。我不明白为什么不。有什么问题？没有别的办法了，我很确定谢谢你，尼克！这非常有用！