Question

考虑以下HTML标记：

<div><span></span></div>

和样式表：

div {
    border: 5px solid yellow;
    position: absolute;    
    width: 200px;
    height: 200px;
    margin: 40px auto;
}

span {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: aqua;
}

没关系。内容按我的预期显示：jsFiddle。

但如果我试图从position:absolute删除div，那么就会发生一些不可理解的事情。 jsFiddle after deleting absolute position of div。

问：为什么span从父div的边界走出来并且div的定位方案受到span渲染的影响？

Answer 1

在position: absolute;元素下使用position: absolute;时，子元素相对于absolute父元素。

因此，由于父级现在是static，而position: absolute;元素不是而非静态位置。

为了拥有相对于父级的absolute元素，请使用position: relative;

div {
    border: 5px solid yellow;    
    width: 200px;
    height: 200px;
    margin: 40px auto;
    position: relative;
}

有关CSS定位的更多信息，请阅读我的回答here。

Answer 2

只需将div position更改为relative。

http://jsfiddle.net/z8BSs/5/

定位方案受子元素的影响

2 个答案: