Question

我有2个DIV相互重叠。现在我该如何避免任何新的重叠？一切似乎都在相互重叠。

我想要的只是<DIV class = "containerA">和<DIV class = "containerB">重叠，以及任何新的DIV显示在这些DIV以下。

Answer 1

添加包装div。试试这段代码

<强> DEMO

    <div class="topCnt">
        <img class = "subContainerB" src="http://s30.postimg.org/mf5cny17l/top_Img.png" />

        <svg class="subContainerA" preserveAspectRatio= "xMinYMid meet" viewBox="0 0 200 240" xmlns="http://www.w3.org/2000/svg">
           <g>
            <rect stroke-opacity="0" id="svg_3" height="240" width="200" y="2.5" x="2.5" stroke-width="5" stroke="#000000" fill="#FF0000"/>
            <rect id="svg_4" height="84" width="408" y="430" x="769" stroke-width="5" stroke="#000000" fill="#FF0000"/>
            </g>
         </svg>
    </div>

    .topCnt{
       position: relative;
       height: 480px;
    }

Answer 2

给出相对于A和C的位置，其中B具有位置绝对值

<强> CSS

.containerC{

    position:relative
}
.subContainerA{
    position:relative;
    left: 0;
    right: 0;
}
.subContainerB{
    position:absolute;
    z-index: 1;
    left: 0;
    right: 0;
}

JsFiddle

让2个DIV重叠，下面是其他DIV

2 个答案: