css - 在不消耗父 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