将列表放在其包含元素的底部

Question

我正在尝试使用<ul>在<div>的底部放置一个position:absolute我不太确定我缺少什么，但列表不是出现，当我检查元素时，它看起来像是在包含元素的顶部。

＆＃13;

＆＃13;

.container {
    width: 200px;
    height: 200px;
    background-color: #BFBFBF
}

.list-container {
    background-color: grey;
    position: relative;
}

ul {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

＆＃13;

<div class="container">
    <div class="list-container">
        <ul>
            <li>
                <h2>Heading</h2>
            </li>
        </ul>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要设置列表容器的高度，而不是容器。

.container {
    width: 200px;
    background-color: #BFBFBF;
}

.list-container {
    background-color: grey;
    height: 200px;
    position: relative;
}

ul {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

<div class="container">
    <div class="list-container">
        <ul>
            <li>
                <h2>Heading</h2>
            </li>
        </ul>
    </div>
</div>

Answer 2

您没有设置包含分区的大小。

.container {
    width: 200px;
    height: 200px;
    background-color: #BFBFBF
}

.list-container {
    width: 200px;
    height: 200px;
    background-color: grey;
    position: relative;
}

ul {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

<div class="container">
    <div class="list-container">
        <ul>
            <li>
                <h2>Hello</h2>
            </li>
        </ul>
    </div>
</div>