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;
}