html - 根据间接父代而不是直接父代的绝对定位

我只是在研究一个简单的示例，以尝试了解绝对定位元素的行为。有一种情况我不明白。

我有一个容器，里面有卡片。我想在此卡的内部添加页脚，因此我在其中添加了另一个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/