在父div中重叠多个div

Question

这可能很简单，但我在解决这个问题时遇到了问题。

我使用bootstrap，下面是我的css和div结构。如何使body { background-image: url("bg-image.png") !important; background-repeat: no-repeat; background-attachment: fixed; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-origin: padding-box; background-position: 0 0; background-size: 100%; bottom: 0; left: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: -1; background-position: 0% 70%; } ，DIV 1和DIV 2重叠？所以基本上我想让DIV 3，DIV 1和DIV 2一个接一个地位于同一级别。

Fiddle

DIV 3

HTML：

.sub{
    position: relative;
    background-color: lime;
}
.og{
    margin-top: 15px;
    position: relative;
    text-align: center;
}
#itmHolder{
    position: absolute;
}

预期的最终结果（<div class="row"> <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 og"> <div class="itmHolder"> <div class="sub">DIV 1</div> <div class="sub">DIV 2</div> <div class="sub">DIV 3</div> </div> <div class="itmHolder"> <button type="button" class="normalBtn">Button</button> </div> </div> </div> 和DIV 1应该落后于DIV 2）：

Answer 1

使用以下CSS将提供您的预期输出：

.itmHolder {
    position: relative;
}

.itmHolder :nth-child(2), .itmHolder :nth-child(3){
    position: absolute;
    top:0;
    width:100%;
} 

检查Fiddle Here.

＆＃13;

＆＃13;

.sub{
	position: relative;
    background-color: lime;
}
.itmHolder {
    position: relative;
}

.itmHolder :nth-child(2) , .itmHolder :nth-child(3){
    position: absolute;
    top:0;
    width:100%;
} 
.og{
	margin-top: 15px;
	position: relative;
	text-align: center;
}
#itmHolder{
	position: absolute;
}

＆＃13;

<div class="row">
    <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 og">
        <div class="itmHolder">
           <div class="sub">DIV 1</div>
           <div class="sub">DIV 2</div>
           <div class="sub">DIV 3</div>
        </div>
        <div class="itmHolder">
           <button type="button" class="normalBtn">Button</button>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

可以通过将position元素设置为absolute并指定其父element的大小来完成。
请看下面的例子。

＆＃13;

＆＃13;

#cont {
  position: relative;
  width: 100px;
  height: 20px;
  background-color: yellow;
}
.sub {
  position: absolute;
  top: 0px;
  left: 0px;
}

＆＃13;

<div class="row">
<div class="og">
    <div class="itmHolder" id="cont" >
       <div class="sub" id="div1">DIV 1</div>
       <div class="sub" id="div2">DIV 2</div>
       <div class="sub" id="div3">DIV 3</div>
    </div>
    <div class="itmHolder">
       <button type="button" class="normalBtn" >Button</button>
    </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者，如果您不想指定父元素的大小并希望使其大小等于子元素的大小，那么您可以将任何一个子元素保留为static如下图所示。

＆＃13;

＆＃13;

#cont {
  position: relative;
  background-color: yellow;
}
.sub {
  position: absolute;
  top: 0px;
  left: 0px;
}

＆＃13;

<div class="row">
<div class="og">
    <div class="itmHolder" id="cont" >
       <div id="div1">DIV 1</div>
       <div class="sub" id="div2">DIV 2</div>
       <div class="sub" id="div3">DIV 3</div>
    </div>
    <div class="itmHolder">
       <button type="button" class="normalBtn" >Button</button>
    </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

在上面的示例中，#cont的大小将由#div1确定。

Answer 3

尝试以下

        .dimension {
        height: 50px;
    }

    .overlap {
        position: relative;
        margin-top: -50px;
        background-color: lime;
    }

    .og {
        margin-top: 15px;
        position: relative;
        text-align: center;
    }

    #itmHolder {
        position: absolute;
    }

HTML

<div class="row">
    <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 og">
        <div class="itmHolder">
            <div class="dimension">DIV 1</div>
            <div class="dimension overlap">DIV 2</div>
            <div class="dimension overlap">DIV 3</div>
        </div>
        <div class="itmHolder">
            <button type="button" class="normalBtn">Button</button>
        </div>
    </div>
</div>