Html 根据间接父项而不是直接父项进行绝对定位_Html_Css_Css Position_Absolute

Html 根据间接父项而不是直接父项进行绝对定位

html css

Html 根据间接父项而不是直接父项进行绝对定位,html,css,css-position,absolute,Html,Css,Css Position,Absolute,我只是在做一个简单的例子，试图了解绝对定位元素的行为。有一件事我不明白我有一个容器，里面有一张卡片。我想在这张卡片里面加一个页脚，所以我在里面放了另一个div，如下所示： <body> <section id="experiences"> <div class="experiences-cards-container"> <div class="experience-card"> <

我只是在做一个简单的例子，试图了解绝对定位元素的行为。有一件事我不明白

我有一个容器，里面有一张卡片。我想在这张卡片里面加一个页脚，所以我在里面放了另一个div，如下所示：

<body>
   <section id="experiences">
      <div class="experiences-cards-container">
         <div class="experience-card">
            <div class="card-footer"></div>
         </div>
      </div>
   </section>
</body>

但页脚元素似乎不是根据其直接父级

体验卡

定位的，而是根据间接父级

体验卡容器定位的，因为我得到了以下结果：

我的问题是：既然页脚元素是直接父元素，为什么页脚元素是根据间接父元素而不是卡片定位的
以下是完整的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类中，它应该可以工作。通过使其相对，它将成为页脚中绝对位置的上下文。
去掉位置中的引号：“相对”
在.experience card类中，它应该可以工作。通过使其相对，它将成为页脚中绝对位置的上下文。
您可以尝试以下方法：
.experiences-cards-container {
   position: relative;
   width: 100%;
   max-width: 1200px;
   /* height: calc(100% - 100px); */
   text-align: center;
   margin: auto;
}

您可以尝试以下方法：
.experiences-cards-container {
   position: relative;
   width: 100%;
   max-width: 1200px;
   /* height: calc(100% - 100px); */
   text-align: center;
   margin: auto;
}

您可以使用此代码

你好，世界！
html，
身体{
身高：100%；
}
#经历{
身高：100%；
背景色：#ECECEC；
}
.储物柜{
位置：相对位置；
宽度：100%；
最大宽度：1200px；
高度：计算（100%-100px）；
文本对齐：居中；
保证金：自动；
}
.经验卡{
显示：内联块；
宽度：280px；
高度：350px；
背景色：白色；
右边距：20px；
盒影：0px 0px 6px 0px#9494；
边缘底部：20px；
文本对齐：左对齐；
位置：相对位置；
}
.体验卡.卡体{
左侧填充：10px；
右边填充：10px；
}
.体验卡.卡片页脚{
位置：绝对位置；
左：0px；
底部：0px；
高度：70像素；
宽度：100%；
背景颜色：蓝色；
右：0；
}
您可以使用此代码

你好，世界！
html，
身体{
身高：100%；
}
#经历{
身高：100%；
背景色：#ECECEC；
}
.储物柜{
位置：相对位置；
宽度：100%；
最大宽度：1200px；
高度：计算（100%-100px）；
文本对齐：居中；
保证金：自动；
}
.经验卡{
显示：内联块；
宽度：280px；
高度：350px；
背景色：白色；
右边距：20px；
盒影：0px 0px 6px 0px#9494；
边缘底部：20px；
文本对齐：左对齐；
位置：相对位置；
}
.体验卡.卡体{
左侧填充：10px；
右边填充：10px；
}
.体验卡.卡片页脚{
位置：绝对位置；
左：0px；
底部：0px；
高度：70像素；
宽度：100%；
背景颜色：蓝色；
右：0；
}
从jss到css。。谢谢10分钟时限一过，我就接受你的答复。谢谢，没问题。我添加了一些关于定位上下文的解释，但我想您已经知道了：）从jss到css。。谢谢10分钟时限一过，我就接受你的答复。谢谢，没问题。我添加了一些关于定位上下文的解释，但我想你已经知道了：）为答案提供一些上下文，解释每个规则的作用。为答案提供一些上下文，解释每个规则的作用。