将div放在重叠的div后面

问题描述 投票：2回答：5

我有以下设置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类重叠，并且页脚应该放在inner_block后面。

在我的解决方案中，我只是没有得到inner_block背后的页脚，而没有做不负责任的事情，比如在x.xem上调用margin-top。我刚刚发现了与z-index的一些链接，这对我来说没有用，因为inner_block从嵌套块中丢失了他的传递高度和宽度。

结果应该看起来像这个漂亮的模型。 enter image description here

你有什么想法？

提前致谢。

html css css-float
5个回答
1
投票

所以我对你的代码做了以下更改：

  1. 删除position: absolute的inner-block。
  2. 当你漂浮inner-block的内容时，你有clear floats，以便父容器不会失去高度。 .inner_block:after { content: ''; display: block; clear: both; } 每当使用浮子时，请记住clear它。
  3. 将position: relative添加到inner_block，将其定位在header和footer上。
  4. 将display: block添加到img，以便您可以移除inline元素（默认显示）上特征下方的小空间。
  5. 还要在边距和宽度上进行修改以实现布局。

.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允许图像沿着行获取可用空间，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>
1
投票

你甚至可以尝试下面的东西，你的代码很好，只需使用.footer margin-top设置你的height等于.header和.inner_block的css calc() function。

.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>
0
投票

这是你在找什么？

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

0
投票
  .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>
0
投票

好吧，只使用z-index并不总是有效。您还需要指定'position'属性，以便在帧的某个位置定义z-index。

Z-index是定义元素的“深度”或“高度”的属性。如果你的<header>的z-index为'100'并且;在标题内定义的<div>元素，通常它会显示在它上面但是一旦你定义了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/

希望能帮助到你。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.