帶位置的元素：絕對位於另一個定位元素內不會繼承背景顏色

已知除非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

帶位置的元素：絕對位於另一個定位元素內不會繼承背景顏色

回答

相關問題