Html 如何在另一个div下重叠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">
    </div>

我想要这个（图片下面的那行）：

有人能帮我吗？ 非常感谢你读我的书

编辑：

在主分区的背景中通过img时，我得到以下信息：

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

<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%">

并尝试以这种方式使用z索引Iget：

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

<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%">

您可以将div与z索引“重叠”。 z索引是div的级别。您可以将其设置为正值和负值

例如，z-index:-1将把div放在另一个容器后面，z-index:2将把div放在另一个容器前面

在您的情况下，您很可能需要使用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>

你必须尝试哪个位置（顶部）适合你的需要。

你可以用z索引“重叠”div。 z索引是div的级别。您可以将其设置为正值和负值

例如，z-index:-1将把div放在另一个容器后面，z-index:2将把div放在另一个容器前面

在您的情况下，您很可能需要使用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>

不过，您必须尝试哪个职位（顶头）适合您的需要。

解决了以下问题：

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

非常感谢

决心做：

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

---

非常感谢

为什么不将图像设置为父div的背景呢？感谢您的回答，我编辑了这篇文章，告诉您应该探索背景图像解决方案，并阅读一些背景属性样式，例如

背景重复

，

背景位置

，

背景大小

，等等（您可以将其中一些组合到

background

shorthand属性中）。您需要设置其中一些以获得预期的行为。它正在工作，非常感谢！！！！已使用{}对于主div。非常感谢！为什么不将图像设置为父div的背景呢？感谢您的回答，我编辑了这篇文章，告诉您应该探索背景图像解决方案，并阅读一些背景属性样式，例如

背景重复

，

背景位置

，

背景大小

，等等（您可以将其中的一些组合到

背景
速记属性中）。您需要设置其中的一些以获得预期的行为。它正在工作，非常感谢！！！！用于{}主分区。非常感谢！感谢您的回答和解释，您真的很好。当我尝试您建议的“行”时完全消失。像另一个div一样将内部放入div，并将img的样式带到div中会更好吗？如果您只将背景图像标记移到前景图像之前，就没有必要乱动z-index。感谢您的回答和解释，您真是太好了。当我尝试您建议的“行”时完全消失。像另一个div一样将img放在一个div中，并将img的样式带到div中会更好吗？如果你只是将背景图像标记移到前景图像之前，就没有必要乱动z-index。