爲什麼div :: before在children元素的頂部顯示？

這對我沒有意義。不應該::在跨度之前呈現呈現之前？它適用於如果我添加位置：相對於子元素。爲什麼div :: before在children元素的頂部顯示？

這可能有事情做與堆疊內容，但我不知道究竟怎麼了。

https://www.w3.org/TR/CSS21/visuren.html#layers

跨度在這種情況下落入＃3，因爲它的非定位和::＃6之前，因爲它是一個定位的後裔？

div { position:relative; } 
 

 
div:before { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: red; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
/* Adding this works: */ 
 
/* span { position: relative; } */

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

來源

2017-10-21 chh

您正在使用'位置。 – FluffyKitten

它的確與堆疊上下文有關，例如，如果聲明除auto之外的任何'z-index'值，比如'-1'，則將創建一個堆棧上下文，'：pseudo-element '會出現在兄弟'span'元素下面。如果沒有聲明'z-index'值，絕對定位元素將總是出現在任何「未定位」元素或靜態元素（* eg：'position：static' *）之上 - 這通常是任何元件。 – UncaughtTypeError

如果一個項目沒有position集，那麼它在佈局中設置相當低。如果您將任何元素定位爲absolute，則應該給所有兄弟元素提供一些position。在這個例子中::before和span是兄弟姐妹，並且因爲::before具有位置和span不::before更「重要」

來源

2017-10-21 13:09:44 zmuci

我希望所有的答案都是這樣向我解釋的。沒有技術術語就很容易理解。我已經做CSS了一段時間，我覺得這是第一次（我能記得的），我必須顯式聲明的位置是：相對於之前使用::時。 – chh

既然你指定的位置是absolute它使內容是在另一個流動的水平。您可以嘗試指定z-index，但即使這並不總是有效。例如，如果您有一些absolute/relative定位的元素，它將在任何數量的z-index上超過static。

來源

2017-10-21 13:07:49 Sergey

:pseudo CSS類的工作方式是元素將前後元素中加入。

像這樣：

<div> :before <span>Test</span> </div>

我不是很需要實現，但要解釋你懷疑什麼，你要添加position:relative到您的DIV後產生的電流結果的原因是因爲:before是設置爲position:absolute。通過這樣做它會拉：元素之前出相對於在其中設置div { position:relative; }最近的元件的電流HTML層次和自身的位置。

由於之前被拉出層次的<span>將填補現有的空白空間（由又名重疊：前）。所以它被放置在什麼地方你告訴它，即在左上角absolute`：

來源

2017-10-21 13:12:12 Vincent1989

爲什麼div :: before在children元素的頂部顯示？

回答

相關問題