html - 将元素放置在流体容器的底部

<分区>

我的 html/css 有问题。我想在我的三个部分中的每个部分中都有一个“了解更多”框，位于每个部分的底部中间。

CSS

#learn {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
    z-index:1;
    margin-bottom: 20px;
    left:50%;
    width: 150px;
    margin-left: -75px;
    text-align: center;
    line-height: 50px;
}
#learn a {
    color: black;
    font-weight: bold;
}

它似乎在顶部框中工作正常: <div id="learn"><a href="#">Learn More</a>

但是在下面的部分中我使用了几乎相同的代码:

<section id='a1' style="height:100%;background-color:white;">
    <div class="container"></div>
        <div id="learn"><a href="#">Learn More</a>
</section>

但是这次没有出现了解更多框。我做错了什么？我玩过position: relative运气不好。

TLDR:了解更多框应该位于标题和部分的底部中间，它只出现在标题中。

P.s 我试图剥离我的代码和 css，但不想再剥离，因为我相信它的包含将突出显示哪些选项有效/无效。

最佳答案

将此添加到您的 CSS: