Question

我正在尝试制作嵌套的div，所以我可以将孩子放在上面和左边，这样他们就可以相互重叠了：

      .boo {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 100px;
        height: 70px;
        background-color: red;
      }
      
      .kah1 {
        position: absolute;
        left: 20px;
        top: 30px;
        width: 50px;
        height: 50px;
        background-color: green;
      }
      
      .kah2 {
        position: absolute;
        left: 30px;
        top: 40px;
        width: 50px;
        height: 50px;
        background-color: blue;
      }

  <body>

    <div class="boo">
      <div class="kah1"></div>
      <div class="kah2"></div>
    </div>

  </body>

它有一个巨大的缺点 - 孩子只是父母的顶部。我应该怎么做才能让他们成为父母，像这样？

desiredresult

事实上，儿童可能不是DIV，IMG也足够，如果这有帮助

Answer 1

试试这个：

 body{margin:0px;padding:0px;}   
     .boo {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 100px;
        height: 70px;
        background-color: red;
      }

      .kah1 {
        position: absolute;
        left: 20px;
        top: 30px;
        width: 50px;
        height: 40px;
        background-color: green;
      }

      .kah2 {
        position: absolute;
        left: 30px;
        top: 40px;
        width: 50px;
        height: 30px;
        background-color: blue;
      }

DEMO HERE

Answer 2

改变这个：

.boo {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 100px;
        height: 70px;
        background-color: red;
      }

到此：

.boo {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 100px;
        height: 70px;
        background-color: red;
        overflow: hidden;
      }

Here is the JSFiddle demo

基本上，您将overflow:hidden添加到父元素.boo：）

Answer 3

您可以使用overflow: hidden隐藏覆盖，因此在您的情况下，css将是这样的：

      .boo {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 100px;
        height: 70px;
        background-color: red;
        overflow: hidden;
      }
      
      .kah1 {
        position: absolute;
        left: 20px;
        top: 30px;
        width: 50px;
        height: 50px;
        background-color: green;
      }
      
      .kah2 {
        position: absolute;
        left: 30px;
        top: 40px;
        width: 50px;
        height: 50px;
        background-color: blue;
      }

  <body>

    <div class="boo">
      <div class="kah1"></div>
      <div class="kah2"></div>
    </div>

  </body>

Answer 4

只需制作主div（.boo）位置：relative

查看代码，并更改kah1和kah2的左侧和顶部值以定位内部框

      .boo {
        position: relative;
        margin-left: 10px;
        margin-top: 10px;
        width: 100px;
        height: 70px;
        background-color: red;
      }
      
      .kah1 {
        position: absolute;
        left: 25px;
        top: 12px;
        width: 50px;
        height: 50px;
        background-color: green;
      }
      
      .kah2 {
        position: absolute;
        right: 25px;
        top: 12px;
        width: 50px;
        height: 50px;
        background-color: blue;
      }

  <body>

    <div class="boo">
      <div class="kah1"></div>
      <div class="kah2"></div>
    </div>

  </body>

嵌套的DIV，如何让孩子真正在里面？

4 个答案: