爲什麼相對定位元素出現在浮動元素的上方？

我有兩個元素：一個具有相對定位，定義了我的頭部大部分，另一個是我想「浮動」在頂部的較小元素。爲什麼相對定位元素出現在浮動元素的上方？

<div id=floater style="float:right"> 
Floater! 
</div> 
<div id=header style="width: 100%; position: relative; background-color: lightgreen"> 
This is the header 
</div>

如this fiddle所示，浮動組件不可見。但是，如果您刪除position: relative，則浮動元素會立即彈出。用z-索引來擾亂並沒有產生任何利益。

標題組件不是「我的」;它通過React-Bootstrap繼承。我可以覆蓋，但現在我主要是想了解浮動和相對定位的相互作用。

來源

2016-11-07 Joshua Engel

這種行爲對我來說似乎很正常。請記住'z-index'對靜態定位元素沒有影響。你的目標又是什麼？ – MaxArt

行爲是正確的位置：相對調出前面元素https://jsfiddle.net/eax6wdpx/3/，您還需要清除或修改BFC https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context，如果您想將元素從浮動移開。 - 許多方法中的2種：https：//jsfiddle.net/eax6wdpx/4/ https://jsfiddle.net/eax6wdpx/5/ –

我弄清楚了我應該做的事情：我使用了絕對定位的浮動，這可能是正確的足夠這個應用程序。在這個過程中，我發現即使是非浮動元素也會出現在相對位置下面，這似乎是線索：相對定位元素似乎排在最前面。 –

沒有位置屬性集的元素將默認爲「位置：靜態」，忽略所有定位屬性，如z-index。通過設置頭元素的相對位置，您已將z-index定位屬性引入該元素，使其位於不具有z-index屬性的float元素前面。

由於z-index將被靜態浮動元素忽略，因此您必須給該元素一個位置屬性（絕對，相對或固定），以便它也可以具有z-index。

舉個例子「position：relative;」會工作。一旦你在float屬性元素上設置了position屬性，你需要爲它添加一個z-index值，它比header元素高。在這種情況下，z-index：1會是一個更高的值，因爲z-index被設置爲默認值。

實施例：

<div id=floater style="float:right; position: relative; z-index: 1;"> 
    Floater! 
</div> 
<div id=header style="width: 100%; position: relative; background-color: lightgreen"> 
    This is the header 
</div>

來源

2016-11-07 20:09:03

我可以浮動和使用位置的想法是一種令人大開眼界，但是，我明白了。謝謝。 –

它不一定是好的做法，但是，如果使用正確，相對定位和浮動工作將很方便。相對位置是指相對於它自身，無論它在頁面上。在這種情況下，更好的選擇是垃圾桶，而不是自己使用相對定位。 –