Question

我有2个div放在一起。第一个div的固定宽度为260px，第二个div占用剩余的宽度。（见下面的结构）

+------------+------------------------------+
|width=260px |  Takes Up Remaining width    |
|  [div A]   |         [div B]              |
|            |                              |
|            |                              |
|            |                              |
|            |                              |
+------------+------------------------------+

div A具有条件可见且宽度较大（500px）的子div。这些子div正在部分地重叠“B＆＃39;

。

我没有线索如何避免A的子div与div B重叠。

注意：使用Z索引进行比特但没有帮助。

请提出一些解决方案。

编辑： 以下是代码段。

<div id="DIV-A" style="position: absolute; width: 260px; overflow: auto;  box-sizing: border-box;>
   <div id="childDiv" style="position: absolute; width: 500px; 150px ;z-index:1000>

   </div>

</div>    

<div id="DIV-B" style="position: absolute; left: 260px;  width: 1420px; box-sizing: border-box;"></div>

Answer 1

CSS部分

 #div_a
    {
        background-color:Green;
        position:relative;
        width:260px;
        height:500px;
        float:left;
    }
    #div_b
    {

        background-color:Gray;
        height:500px;


    }

    .div_a_child
    {

        width:500px;
        position:absolute;

        background-color:Black;
        height:300px;
        color:White;
    }

和HTML标记

<div id=div_a>

    <div class=div_a_child>
       Child of Div A
    </div>

</div>

<div id=div_b>

</div>

这是在编辑问题!!

之前完成的

刚看到有问题的更新!!

不要为div使用“绝对”位置！如果你真的想使用，把它放在div中，位置“相对” 您的代码所做的更改如下所示！

 <div id="DIV-A" style="position:relative; width:260px;  height:500px; background-color:Yellow;float:left;">
       <div id="childDiv" style="position:absolute; width:500px; height:300px; background-color:Green;">

       </div>

</div>    

<div id="DIV-B" style=" background-color:Silver; height:500px; ">

</div>

请避免使用内联CSS！将CSS代码放在单独的文件中！

希望它有用！快乐的编码！：）

Answer 2

也许你应该用“position：absolute”和“position：relative”作为childelement的CSS-Attributes玩一点。

说明：如果子元素在“flow”中，则它的宽度大于其父元素的宽度。使用“position”属性，您可以将其从正常的“流程”中取出，因此它可以更宽。

http://codepen.io/anon/pen/NqXYKb

#child { 
  width: 500px;
  height: 100px;
  display: inline-block;
  background-color: yellow;
  position: relative;
}

儿童div重叠

2 个答案: