我只是在做一个简单的例子来尝试理解绝对定位元素的行为。有一个案例我不明白。
我有一个容器，里面有一张卡片。我想在这张卡片中添加一个页脚，所以我在里面放了另一个 div，如下所示:
<body>
<section id="experiences">
<div class="experiences-cards-container">
<div class="experience-card">
<div class="card-footer"></div>
</div>
</div>
</section>
</body>
因为它是页脚，所以我希望它显示在我的名片底部。这就是我使用绝对定位的原因:
.experience-card .card-footer {
position: absolute;
left: 0px;
bottom: 0px;
height: 70px;
width: 100%;
background-color: blue;
}
但似乎页脚元素没有根据其直接父元素 experience-card 定位，而是根据间接父元素 experiences-card-container 定位，因为我得到结果如下:
我的问题是:为什么页脚元素根据间接父元素而不是卡片定位，因为它是直接父元素？
这是完整的 CSS:
html, body
{
height: 100%;
}
#experiences {
height: 100%;
background-color: #ECECEC;
}
.experiences-cards-container {
position: relative;
width: 100%;
max-width: 1200px;
height: calc(100% - 100px);
text-align: center;
margin: auto;
}
.experience-card {
position: "relative";
display: inline-block;
width: 280px;
height: 350px;
background-color: white;
margin-right: 20px;
box-shadow: 0px 0px 6px 0px #949494;
margin-bottom: 20px;
text-align: left;
}
.experience-card .card-body {
padding-left: 10px;
padding-right: 10px;
}
.experience-card .card-footer {
position: absolute;
left: 0px;
bottom: 0px;
height: 70px;
width: 100%;
background-color: blue;
}
最佳答案
去掉 .experience-card 类中 position: "relative"; 中的引号，它应该可以工作。通过使其相对，它将成为页脚中绝对定位的上下文。
关于html - 根据间接父级而不是直接父级的绝对定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58402669/