如何在另一个div下重叠div？

Question

我想建立一个网页，我有这个。

我做了这个代码。

    <div style=" width: 100%; text-align: center;">
        <div style="display: inline-block;"><img class="img-responsive" src="/i/g-6-4-9-131_9649_9.jpg" style="float:left;"></div>
        <div style="display: inline-block;"><img class="img-responsive" src="/i/g-6-4-7-131_9647_7.jpg" style="float:left;"></div>
        <div style="display: inline-block;"><img class="img-responsive" src="/i/g-6-4-8-131_9648_8.jpg" style="float:left;"></div>
        <img class="img-responsive" src="/i/g-6-4-6-131_9646_6.jpg" style="width: 100%; height: 5px">
    </div>

我想这样（图片下的一行）。

谁能帮帮我？非常感谢您的阅读。

EDIT :

当在主div的背景下传递img的时候，我得到的是这样的。

<div style=" width: 100%; text-align: center; background-image:url(/i/g-6-4-6-131_9646_6.jpg)">

并试图使用z-index这种方式，我得到这个:

<img class="img-responsive" src="/i/g-6-4-6-131_9646_6.jpg" style="width: 100%; height: 5pxz-index: -1; position: absolute; top: 50%">

Answer 1

你可以用z-index来 "重叠 "divs.z-index是div的级别。你可以把它设置为正值和负值。

因此，例如：z-index: -1会把这个div放在另一个div的后面，z-index: 2会把它放在另一个容器的前面。

在你的例子中，你很可能需要使用position: absolute;来将该行直接放在其他图片的下方，因为div和图片都是以块的形式显示，自然不会重叠。

所以，你的代码应该是这样的。

  <div style=" width: 100%; text-align: center;">
    <div style="display: inline-block;"><img class="img-responsive" src="/i/g-6-4-9-131_9649_9.jpg" style="float:left;"></div>
    <div style="display: inline-block;"><img class="img-responsive" src="/i/g-6-4-7-131_9647_7.jpg" style="float:left;"></div>
    <div style="display: inline-block;"><img class="img-responsive" src="/i/g-6-4-8-131_9648_8.jpg" style="float:left;"></div>
    <img class="img-responsive" src="/i/g-6-4-6-131_9646_6.jpg" style="width: 100%; height: 5px; z-index: -1; position: absolute; top: 50%">
</div>

你得试试哪个位置（顶部）适合你的需求。

Answer 2

解决了做 。

 <div style=" width: 100%; text-align: center; background: repeat-x center url('/i/g-6-4-6-131_9646_6.jpg')">        
        <div style="display: inline-block;">
            <img class="img-responsive" src="/i/g-6-4-9-131_9649_9.jpg" style="float:left;">
        </div>
        <div style="display: inline-block;">
            <img class="img-responsive" src="/i/g-6-4-7-131_9647_7.jpg" style="float:left;">
        </div>
        <div style="display: inline-block;">
            <img class="img-responsive" src="/i/g-6-4-8-131_9648_8.jpg" style="float:left;">
        </div>
    </div>

非常感谢!