绝对位置不在父对象内

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;
}

超文本标记语言：

<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/

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

Answer 1

由于子div的高度为75px，而父div内部的高度也为

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

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

p {
  display: inline;
}

希望这会让你得到你想要的。

Answer 2

不能使用position:absolute执行此操作，因为它会从文档流中删除元素<父对象上的代码>位置：相对将更改位置：绝对相对于的位置，但它不会展开以包含位置：绝对。您需要设置一个固定高度或使用位置：相对。

注意，如果在示例中使用position:relative，则需要添加一个margin-bottom等于top的值，以使其展开以包含position:relative。请参见此示例：http://jsfiddle.net/yV5q6/