位置子div沒有擴展父div

Question

我想定義下面的子div位置。

|-------------------| 
| parent div  | 
|     | 
|     | 
|     | 
| |-------|  | 
| | child|  | 
| | div |  | 
-----|  |------| 
    |-------| 

我使用的相對位置來定義子div的位置，但它擴大了

|-------------------| 
| parent div  | 
|     | 
|     | 
|     | 
| |-------|  | 
| | child|  | 
| | div |  | 
| |  |  | 
|----|-------|------| 

我不知道如何可以定位孩子的div不擴大父div的高度。

Answer 1

您可以使用兒童DIV

HTML的相對定位做了

<div class="parent"> 
<div class="child"> 
    </div> 
</div> 

CSS：

.parent 
{ 
    background-color:green; 
    height:500px; 
    width:500px; 
} 
.child 
{ 
    position:relative; 
    top:350px; 
    left:200px; 
    height:200px; 
    width:100px; 
    background-color:red; 
} 

你可以設置顏色和寬度按要求。 看一看JsFiddle