Question

我有几个不同背景颜色的div。

像这样：

<div>
 <div class="bg-blue">Blue background</div>
 <div class="bg-orange">Orange Background</div>
 <div class="bg-white">White Background</div>
 <div class="bg-gray">Gray Background</div>
</div>

一些css

.bg-blue {
  width: 100%;
  padding-bottom: 2%;
  background-image: url(../img/blue.png);
}

.bg-orange, .bg-gray{
  width: 100%;
  padding-bottom: 20%;
  background-image: url(../img/orange.png);
}

.bg-gray {
  background-image: url(../img/gray.png);
}
.bg-white {
  width: 100%;
  padding-bottom: 15%;
  color: #fff;
}

现在我有一个带有图像的div，我希望在div上重叠橙色和白色背景。

所以现在我不确定我是否必须在橙色div中创建这个div或者只是在它之下。

我怎么能解决这个问题？

Answer 1

您可以在橙色和白色之间添加div，但由于您使用的是position:absolute，因此不会出现问题http://jsfiddle.net/kbo5fL9d/

 <div class="bg-orange odd">Orange Background</div>
<div class="image"></div>
<div class="bg-white even">White Background</div>

CSS

.image{
position:absolute;
background:yellow !important;
width:100%;
height:50px;
margin-top:-30px;
}

Answer 2

使用position: absolute和relative，如我的示例JSBIN中所示。

此外，使用百分比padding-top属性来设置重叠div流体的高度，如下代码所示：

.overlap {position:absolute; width:100%; background-color: red; padding-top: 25%; top:24px;}

Answer 3

你可以检查一下，这是一个绝对定位在相对定位的div。

http://jsfiddle.net/jd9j591r/

<div>
  <div class="bg-blue">Blue background</div>
  <div class="container">
    <div class="overlap"></div>
    <div class="bg-orange">Orange Background</div>
    <div class="bg-white">White Background</div>
 </div>
 <div class="bg-gray">Gray Background</div>
</div>

CSS

.bg-blue {
    width: 100%;
    padding-bottom: 2%;
    background: blue;
}

.bg-orange, .bg-gray{
    width: 100%;
    padding-bottom: 20%;
    background: orange;
}

.bg-gray {
    background: gray;
}
.bg-white {
    width: 100%;
    padding-bottom: 15%;
    color: #fff;
    background: white;
}

.container {position: relative;}

.overlap {position: absolute; width: 40px; height: 160px; background: red; top: 10px; left:50px}

将div放在彼此的顶部，允许溢出

3 个答案: