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在使用position:absolute的同时在父div中？

Answer 1

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

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

Answer 2

由于您为子 div 和父 div 提供了 75px 的高度，因此您还提供了 <p>，它是一个块元素，因此 <p> 标签正在腾出空间，然后您的子 div 出现....使父元素的 div 高度大于子元素并将 <p> 标签样式设置为 display: inline;

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

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

绝对位置不在父级内部

2 个答案: