嵌套的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，如何讓孩子真正在裏面？

回答

相關問題