位置子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