带位置的元素：绝对位于另一个定位元素内不会继承背景颜色

已知除非position：absolute的元素不在另一个定位元素内，否则它将超出流程。因此span没有蓝色背景。带位置的元素：绝对位于另一个定位元素内不会继承背景颜色

<body> 
    <div class = "main" style="background-color: blue;" /> 
     <span style="position:absolute"> Some content right here</span> 
    </div> 
    </body>

但是，如果我们把position:relative放到.main的样式中，span应该有蓝色背景。那为什么不呢？

来源

2016-01-13 Nazerke

首先你的代码是无效的，如果你给div一些宽度和高度，那么它也会工作 - https://jsfiddle.net/oe4Ln5y3/ – Anonymous

因为span有绝对位置，主div有无内容。如果您将跨度设置为相对，它将起作用。如果您将宽度和高度设置为上述注释中提到的div，它也会起作用。 – Nomeaning25

@Anonymous我的问题不是关于如何使它工作，而是为什么它不适用于这个特定的例子。我在下面得到了答案。感谢您的评论。 – Nazerke

Background color没有继承（尽管可以做到）而不管定位，所以不清楚你在问什么。

但是，在这种情况下，因为您已经完全定位了子div，所以父项会崩溃（因为小孩现在不在流中），因此不显示任何背景。

如果你给div一些高度，背景将会出现。但是，这不会影响跨度的背景，默认为透明。

来源

2016-01-13 18:47:19

带位置的元素：绝对位于另一个定位元素内不会继承背景颜色

回答

相关问题