Html 如何使用绝对定位将div固定在另一个div内

在悬停事件中，我显示一个具有绝对位置的div，在该div的底部，我需要一个固定div

看看我想要达到的目标

我有以下代码：

CSS

.showpro{position:absolute;z-index:999;width:500px;height:auto;display:none;max-height:500px;}
.bottom{width:500px;position:fixed;bottom:0;left:0;}

代码

<div class='showpro'>
    <div class='top'>

    </div>
    <div class='bottom'>

    </div>
</div>

---

有了这个代码，它就出现在Container div的左下角。有人能说出原因吗？有任何帮助吗？

具有

位置：fixed

的元素始终相对于浏览器窗口定位。尝试对“固定”元素使用

position:absolute

下面是一个示例，它显示了您的预期结果

.container{
位置：相对位置；
宽度：100vw；
高度：100vh；
背景颜色：棕色；
}
showpro先生{
位置：绝对位置；
z指数：999；
宽度：200px；
高度：自动；
最大高度：300px；
填充底部：80px；
溢出：隐藏；
背景色：红色；
右：0；
}
.顶{
溢出：自动；
最大高度：220px；
右边距：20px；
}
.底部{
宽度：200px；
位置：绝对位置；
底部：0；
左：0；
高度：80px；
背景色：绿色；}

这里可以有很多文字。Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责。Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责。
这是“固定”元素。

将主div和主div内的div的位置更改为相对：

示例：使用此css代码

#four {
    background-color: blue;
    height: 200px;
    position: relative;
    top: 50px;
    width: 100px;
}

---

对不起，我忘了提到，最大高度是为一个div提供的。所以对于绝对定位，如果内容超过了提供的最大高度，固定div停留在中间。上面有一些内容，下面也有一些。请更新您的问题以更好地反映情况。在我的答案中添加了一个示例来说明它是如何工作的。点击“完整页面”以更好地查看效果。