绝对位置不在父级内

Question

我的 CSS 有关于 div 位置的问题。

我有一个父 div 设置为position:relative和一个子 div 设置为position:absolute

但由于某种原因，子 div 显示在父 div 的边界下方和外部...

这是我的 CSS：

.big{
    position:relative;
    width:40%;
    border:1px solid black;
    display:inline-block;
}

.small{
    position:absolute;
    width:75px;
    height:75px;
    border:1px solid green;
}

HTML：

<div class="big">        
    <p align="center">Test</p>
    <div class="small"></div>        
</div>
<div class="big">
    <p align="center">Test</p>
    <div class="small"></div>    
</div>

我提供了一个 JSFiddle 来向你展示它的实际效果：

http://jsfiddle.net/j6VLc/1/

我如何修复它以使子 div 在使用时位于父 div 内position:absolute？

Answer 1

您不能使用position: absolute它来执行此操作，因为它会从文档流中删除元素。position: relative在父级上将更改position: absolute相对于的位置，但不会扩展以包含position: absolute. 您将需要设置固定高度或position: relative改为使用。

请注意，如果position: relative在您的示例中使用，您将需要添加一个margin-bottom等于 的值top以使其扩展以包含position: relative. 看这个例子：http : //jsfiddle.net/yV5q6/