重叠 div 后面的位置 div

Question

我有以下设置 http://jsfiddle.net/47x60k4w/529/。

HTML

<div class="header">
header
</div>
<div class="inner_block">
    <div class="column">
        <img src="xxx" />
    </div>
    <div class="column">
        <img src="xxx" />
    </div>
    <div class="column">
        <img src="xxx" />
    </div>
</div>
<div class="footer">
footer
</div>

inner_block 应该与 header class 重叠，页脚应该放在 inner_block 的正后方。

在我的解决方案中，我只是不做一些不负责任的事情，比如在 margin-top 上调用带有 x.xem 的 inner_block 后面的页脚。我刚刚找到了一些与 z-index 相关的链接，但这些链接对我不起作用，因为 inner_block 从嵌套块中丢失了他传递的高度和宽度。

结果应该像这个漂亮的模型。

你有什么想法吗？

提前致谢。

Answer 1

这是您要找的东西吗？

.header{
  position:relative;
  background-color:black;
  width:100%;
  height:50px;
}

.footer{
  clear:both;
  background-color:red;
  width:100%;
  height:50px;
}

.inner_block{
  position: absolute;
  width:100%;
  border:solid 1px black;
  padding: 5px;
  margin-left: 2.5%;
  margin-top:-2.5%;
  background-color:white;
}

http://jsfiddle.net/8y4e8L08/

Answer 2

因此我对您的代码进行了以下更改：

删除inner-block的position: absolute。
当您浮动 inner-block 的内容时，您有 clear float 这样父容器就不会丢失身高.
```
.inner_block:after {
  content: '';
  display: block;
  clear: both;
}
```
无论何时使用浮动，记得clear它。
将 position: relative 添加到 inner_block 以将其置于 header 和 footer 之上。
将 display: block 添加到 img 以便您可以删除 inline 元素（默认显示）下方的小 space .
还对边距和宽度进行了一些修改以实现布局。

.header {
  position: relative;
  background-color: black;
  width: 100%;
  height: 50px;
}
.footer {
  clear: both;
  background-color: red;
  width: 100%;
  height: 50px;
}
.inner_block {
  position: relative;
  /*width: 100%;*/
  border: solid 1px black;
  padding: 5px;
  margin-left: 2.5%;
  margin-top: -2.5%;
  margin-right: 2.5%;
  margin-bottom: 2.5%;
  background-color: white;
}
.inner_block:after {
  content: '';
  display: block;
  clear: both;
}
.column {
  max-width: 30%;
  float: left;
  margin-right: 2.5%;
}
.column:first-child{
    margin-left: 2.5%;
 }
.column:last-child{
    margin-left: 0;
 }
.column img {
  max-width: 100%;
  height: auto;
  display: block;
}

<div class="header">

</div>
<div class="inner_block">
  <div class="column">
    <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
  </div>
  <div class="column">
    <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
  </div>
  <div class="column">
    <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
  </div>
</div>
<div class="footer">
  test
</div>

希望这能让您抢先一步。检查一下，让我知道您对此的反馈。谢谢！

替代解决方案：

所以这是一个使用 flexbox 的解决方案，它更容易设置：

首先删除 floating 容器和 clearfix。

现在用另一个 div

包裹 inner_block

.inner_block_wrapper {
  margin: -2.5% 2.5% 2.5% 2.5%;
  background-color: white;
  position: relative;
}
.inner_block {
  border: solid 1px black;
  background-color: white;
  padding: 5px;
  display: flex;
  justify-content: center;
}
.column {
  margin: 5px;
}

使用 display: flex 允许图像沿行获取可用的 space 并 justify-content: center 将其沿中心对齐。看看这个！

.header {
  position: relative;
  background-color: black;
  width: 100%;
  height: 50px;
}
.footer {
  clear: both;
  background-color: red;
  width: 100%;
  height: 50px;
}
.inner_block_wrapper {
  margin: -2.5% 2.5% 2.5% 2.5%;
  background-color: white;
  position: relative;
}
.inner_block {
  border: solid 1px black;
  background-color: white;
  padding: 5px;
  display: flex;
  justify-content: center;
}
.column {
  margin: 5px;
}
.column img {
  max-width: 100%;
  height: auto;
  display: block;
}

<div class="header">

</div>
<div class="inner_block_wrapper">
  <div class=" inner_block ">
    <div class="column ">
      <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg " />
    </div>
    <div class="column ">
      <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg " />
    </div>
    <div class="column ">
      <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg " />
    </div>
  </div>
</div>
<div class="footer ">
  test
</div>

Answer 3

好吧，仅使用 z-index 并不总是有效。您还需要指定 'position' 属性以及定义 z-index wrt 框架的某些位置。

Z-index 是一个属性，它定义了元素的 'depth' 或 'height'。如果您的 <header> 的 z-index 为“100”，并且； <div> 元素定义在 header 中，通常它会显示在它上面，但是一旦你定义了 z-index:50;因为 50<100，<div> 个元素会隐藏在它后面。

z-index

的例子

1) http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex

2) https://css-tricks.com/almanac/properties/z/z-index/

希望对您有所帮助。

Answer 4

您甚至可以尝试以下操作，您的代码很好，只需使用 [=16= 将 .footer margin-top 设置为 .header 和 .inner_block 的 height ].

.header{
  position:relative;
  background-color:black;
  width:100%;
  height:50px;
}

.footer{
  background-color:red;
  width:100%;
  height:50px;
  margin-top:calc(100% - 82%);
}

.inner_block{
  position: absolute;
  width:90%;
  border:solid 1px black;
  padding: 5px;
  background-color:white;
  margin:-2.5% calc(100% - 97%);
}

.column {
    width:30%;
    float:left;
    margin:0 1.6%;
}

.column img {
    max-width:100%;
    height:auto;
}

  <div class="header">
  
  </div>
  <div class="inner_block">
  <div class="column">
    <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
  </div>
  <div class="column">
   <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
  </div>
  <div class="column">
   <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
  </div>
  </div>
    <div class="footer">
    test
    </div>

Answer 5

  .header {
        height: 200px;
        width:800px; 
        background-color:#000;
        margin:20px;
    }
   .header {
        margin-bottom: -25px;
    }
    .inner_block {
        width: 35%; 
        height: 150px;
        margin: auto 200px;
        background-color:#FFF;
        border:1px solid #000;
        margin-top: -45px; 

    }
    .column{
        max-width:20%;
        float:left;
        border: 2px soid #999;
        margin:25px;  
    }
    .column img{
         max-width:100%;
        height:auto;
        }

    .footer {
        height: 100px; 
        margin-top: -25px;
        margin:20px;
        background-color:#F00;
        width:800px;

    }
    .content {
        position: relative;
        z-index: 1;
    }

 <div class="header"></div>
   <div class="inner_block">
     <div class="column">
       <img src="download.jpg"/>
        </div>
      <div class="column">
        <img src="download.jpg"/>
       </div>
    <div class="column">
        <img src="download.jpg"/>
      </div>
   </div> 
<div class="footer">
</div>

重叠 div 后面的位置 div

Position div behind overlapping div

html

css

css-float