如果我有一个浮动的<div id='1' style='float:right;'>controls and links</div>后跟一个<div id='2' style='position:relative;'>lorem ipsum text here...</div>，那么＆lt; div＆gt; ＃2位于＆lt; div＆gt;之上＃1，阻止任何鼠标交互。 （如果＆lt; div＆gt;＃2具有纯色背景颜色，则它会完全隐藏＆lt; div＆gt;＃1，但仍然＆＃34;包围＆＃34;围绕＆lt; div＆gt;＃1。）为什么会这样？
即使我在两者上都设置z-index值，尝试强制浮动的＆lt; div＆gt;也是如此。 ＃1到顶部。
有四种情况可供考虑。我已将它们全部放入this JSFiddle。 （JSFiddle也使用不透明度来说明堆叠。）
position:relative。 结果：＆lt; div＆gt; ＃2堆叠在＆lt; div＆gt;的顶部＃1。无法与鼠标进行交互。z-index:1000但没有位置;以下<div>＃2包含z-index:0和position:relative。 结果：＆lt; div＆gt; ＃2仍然堆放在＆lt; div＆gt;的顶部＃1。无法与鼠标进行交互。z-index:1000和position:relative;以下＆lt; div＆gt; ＃2有z-index:0和position:relative。 结果：＆lt; div＆gt; ＃1堆叠在＆lt; div＆gt;的顶部＃2，鼠标交互很好。我已经看过一些类似的SO问题，但没有一个能够解决这个问题。我还阅读了一些CSS浮动和定位文章，但似乎都没有解决这个问题。
答案 0 :(得分：2)
在处理堆叠订单时，我建议您仔细阅读section 9.9 of CSS2中的以下列表：
在每个堆叠上下文中，以下按顺序绘制以下图层：
- 构成堆叠背景的元素的背景和边框。
- 子堆叠上下文具有负堆栈级别（最多为负数）。
- 流入的，非内联级别，未定位的后代。
- 未定位的花车。
- in-flow，内联级别，非定位后代，包括内联表和内联块。
- 堆叠级别为0的子堆叠上下文和堆栈级别为0的已定位后代。
- 具有正堆栈级别的子堆叠上下文（最少积极的第一个）。
首先，您需要记住两件事：
z-index对非定位元素没有影响。这包括花车。这就是为什么在没有定位的情况下在浮动上设置z-index不会改变任何东西。这两点涵盖了在情景2和3中浮动从未出现在其定位兄弟前面的原因：定位的兄弟姐妹具有堆叠等级0（＃6），这确保它被涂在浮子前面（＃4）
在情景1中，未定位的兄弟姐妹属于＃3，这就是为什么它被涂在浮子后面（＃4）。
在方案4中，浮动变得无关紧要。您现在在同一堆叠上下文中有两个定位元素，一个具有比另一个更高的堆栈级别（并且，暗示为elsewhere，更大的是完全不必要的数量），因此堆栈级别越高，堆栈级别越小。
答案 1 :(得分：0)
这确实是定位如何运作的。
没有定位，元素的行为与您期望的一样。
定位元素会将其置于新的堆叠上下文中。因此，在未定位的之后的相对div表现得好像它堆叠得更高。 （即当你以任何方式使它们重叠时，第二个会遮挡第一个。）
如果您希望z-index工作，则必须定位元素。所以在场景3中，z-index什么都不做，使其在功能上与场景2相同。
因此，方案4是您想要的解决方案。
希望这能解释事情！
编辑：或不。见评论。