将物品放置在流体容器的底部[重复]答案

【问题标题】：Positioning an item at the bottom of a fluid container [duplicate]将物品放置在流体容器的底部[重复]
【发布时间】：2014-08-24 08:09:36
【问题描述】：

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

http://jsfiddle.net/9uxGq/4/

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，但不想再剥离，因为我相信它的包含将突出显示哪些选项将/不会起作用。

【问题讨论】：

标签： html css

【解决方案1】：

将此添加到您的 CSS：

section {
    position: relative;
}

演示：http://jsfiddle.net/9uxGq/5/

【讨论】：