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

Question

在悬停事件中我显示一个具有绝对定位的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;}

CODE

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

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

    </div>
</div>

使用此代码，它位于Container div的左下角。有谁能说为什么？有什么帮助吗？

Answer 1

position: fixed元素始终相对于浏览器窗口定位。尝试使用position: absolute来修复＆＃34;修复＆＃34;元件。

以下示例显示了您的预期结果。

＆＃13;

＆＃13;

.container{
  position:relative;
  width:100vw;
  height:100vh;
  background-color:brown;
}
.showpro{
  position:absolute;
  z-index:999;
  width:200px;
  height:auto;
  max-height:300px;
  padding-bottom:80px;
  overflow:hidden;
  background-color:red;
  right:0;
}
.top{
  overflow:auto;
  max-height:220px;
  margin-right: 20px;
}
.bottom{
  width:200px;
  position:absolute;
  bottom:0;
  left:0;
  height:80px;
  background-color:green;}

＆＃13;

<div class="container"><div class='showpro'>
    <div class='top'>
Here can be a lot of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class='bottom'>
This is the "fixed" element.
    </div>
</div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

示例：使用此css代码

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