css - CSS无序列表将各个元素放在一起

Question

我在让它按我想要的方式运行时遇到问题，并且可以使用一些帮助。我在无序列表中有 2 个图像和 2 个标题，我希望标题显示在图像上，但是当我使用定位时，所有内容最终都堆叠在一起。

HTML

<ul>
    <li>
        <img src="image1.png" />
        <div>Caption 1</div>
    </li>
    <li>
        <img src="image2.png" />
        <div>Caption 2</div>
    </li>
</ul>

CSS

li {
    position: relative;
}

div {
    position: absolute;
    bottom: 0;
    left 0;
    background: rgba(0,0,0,.8);
    width: 100%
    z-index: 10;
}

一切都只是堆叠在一起。预期的输出是页面上的 2 个单独的图像，每个图像的底部都有一个重叠的标题。

我在这里做错了什么？任何帮助将不胜感激！！

谢谢，瑞安

Answer 1

在我看来还可以。只是修复了一些小的语法问题。

http://jsfiddle.net/isherwood/bQMBG/

li {
    position: relative;
    margin-bottom: 20px;
    list-style-type: none;
}
div {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    width: 300px;
    z-index: 10;
}