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

我试图让嵌套的div，这样我就可以定位与上边和左边的孩子，这样他们就可以互相重叠：嵌套的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

事实上，孩子可能不会资料核实，IMGS就足够了太多，如果这有助于

来源

2015-12-16 Victor Muller

试试这个：

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

来源

2015-12-16 09:10:12

谢谢，这个工作！ =） –

为什么sir @VictorMuller –

更改此：

.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 :)

来源

2015-12-16 09:10:38

您可以overflow: hidden隐藏overwflow，所以你的情况的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>

来源

2015-12-16 09:10:51 Marv

只是使主DIV（.boo）位置：相对于

看到代码，和更改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>

来源

2015-12-16 09:14:30

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

回答

相关问题