html - 定位方案会影响子元素

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 .

但如果我试图从 div 中删除 position:absolute，则会发生一些难以理解的事情。 jsFiddle after deleting absolute position of div .

问:为什么span会脱离父div的边界，div的定位方案会影响span的渲染？

Answer 1

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

因此，由于父级现在是 static，并且 position: absolute; 元素与static非相对> 职位。

为了让absolute元素相对于父元素，使用position: relative;

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

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