html - 如何在CSS中将div定位在绝对div下方

Question

我有这样的html结构

<ul class="rslides transparent-btns transparent-btns1" id="slider1" style="max-width: 540px;">
    <li class="fluidratio" id="transparent-btns1_s1" style="display: list-item; transition: opacity 500ms ease-in-out 0s; float: none; position: absolute; opacity: 0; z-index: 1;">
        <div class="bg thumbnail">
            <img class="thumb big" src="http://images01.inmotico.com/314/900/3149002000RC/580X420/b29e437f883ed50a71026a24cceb6f10.JPG" name="primary" id="primary" style="margin-top: -215px;">
        </div>
        <!-------!This div is for the discription in the image----->
        <div class="pie_foto">
            <div class="pagination_img">finca 1 de 14</div>
        </div>
        <div class="description_seemoreiii">Tels: 6107-2627 / 8669-8942 / 2573-9821</div>
    </li>
</ul>

然后我有这样的相关CSS

.bg {
    background-color: #333 !important;
}
.pie_foto {
    bottom: 0;
    display: block;
    float: left;
    left: 0;
    margin-bottom: 0;
    position: absolute;
    width: 100%;
    background: none repeat scroll 0 0 black;
}
.pagination_img {
    text-align:center;
    color:white;
    font:Verdana, Geneva, sans-serif
}
.description_seemoreiii {
    background: none repeat scroll 0 0 black;
    text-align:center;
    color:white;
    font:Verdana, Geneva, sans-serif;
}

我正在尝试在图像下方添加类 description_seemoreiii 的 div，在图像底部添加类名称 pagination_img 的 div。但我无法得到它

我创建了一个 FIDDLE here.

Answer 1

不完全确定为什么 pie_foto 是绝对位置？您是否试图将它放在图像本身中？

我在这里创建了一个 fiddle ，通过删除带有 pie_foto 类的 div 上的绝对位置来修复它:

http://jsfiddle.net/richardsonweb/sqyPv/

但是，如果您尝试将类为 .pie_foto 的 div 放置在图像容器本身中，这可能更适合您:

http://jsfiddle.net/richardsonweb/8Lkba/

在第二个示例中，我将 .pie_foto 元素移动到 .thumbnail div 中:

        <div class="bg thumbnail">
            <img class="thumb big" src="http://images01.inmotico.com/314/900/3149002000RC/580X420/b29e437f883ed50a71026a24cceb6f10.JPG"
            name="primary" id="primary" style="margin-top: -215px;">
                <div class="pie_foto">
            <div class="pagination_img">finca 1 de 14</div>
        </div>
        </div>
        <!-------!This div is for the discription in the image----->
          <div class="description_seemoreiii"> Tels:   6107-2627 / 8669-8942 / 2573-9821</div> 

然后，我将 .thumbnail div position: relative，以便将 .pie_foto div 定位在其中。

.thumbnail{position: relative; overflow: hidden;}

希望这对您有所帮助!