我有两个元素：一个具有定义大部分标题的相对位置，另一个是我想在其上“浮动”的小元素。
<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-index进行改进并没有产生任何兴趣。
标题组件不是“我的”;它是通过React-Bootstrap继承的。我可以覆盖，但是现在我主要想了解浮动和相对定位的相互作用。
答案 0 :(得分：1)
当元素定位时，它们可以与其他元素重叠。如果两个定位元素重叠而未指定z-index，则HTML代码中最后一个元素将显示在顶部。
答案 1 :(得分：1)
没有设置位置属性的元素将默认为＆＃34; position：static＆＃34;它会忽略所有定位属性，例如z-index。通过为header元素设置相对定位，您已将z-index定位属性引入该元素，将其置于不具有z-index属性的floater元素前面。
由于z-index将被静态浮动元素忽略，因此您必须为该元素赋予一个位置属性（绝对，相对或固定），因此它也可以具有z-index。
对于你的例子＆＃34; position：relative;＆＃34;会工作。在浮动元素上设置position属性后，需要向其添加一个比header元素高的z-index值。在这种情况下，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>
答案 2 :(得分：0)
在步骤4中绘制了流入的，未定位的块级元素
在步骤5中绘制浮动项目。因此浮动元素被绘制在静态div的“顶部”上，您会看到它显示出来。
但在第8步中绘制了带有'z-index：auto'或'z-index：0'的后代。因此将position:relative添加到div意味着它现在被绘制在“顶部”浮动的元素，隐藏它。