相对定位与左浮动重叠问题

Question

作为一种CMS后端解决方案，我希望用户可以有意地将任何CMS元素切换到float: left。然而，我必须发现，由于所有容器元素也使用相对定位，任何放置在浮动元素旁边的元素都会重叠（仅以块的形式，而不是内容），从而使用户无法使用其他元素控件。

<div id="container1" class="elContainer" style="float: left;"></div>
<div id="container2" class="elContainer" style=""></div>

.elContainer {
   position: relative;
}

您可以尝试使用此JSFiddle设置来测试该问题： http://jsfiddle.net/PNktA/ 如果从第一个外部容器中移除float，您将能够单击编辑按钮。如果保留float，则无法单击它。

我尝试在此处找到适用的解决方案，但我没有成功。有人知道如何解决这个问题吗？

如果解决方案仅适用于FF和Safari，则没有问题，因为我可以要求我的后端使用这些浏览器。

- SquareCat

---

甚至更好的是，提供一个演示问题的jsFiddle。 - kapa

演示（我认为这显示了OP的CSS问题）：http://jsfiddle.net/6XbAm/ - Wesley Murch

我创建了这个示例以演示问题：链接 ... 如果您从第一个外部容器中删除浮动，您将能够单击编辑按钮。如果浮动保持活动状态，则无法单击。 - SquareCat

我认为我们需要查看包含div的完整标记。 - Brighty

抱歉，我在添加最后一条评论时没有看到您发布了演示。 - Brighty

Answer 1

已经提供了解决方案，但也许我可以解释一下为什么"问题"实际上会发生。

据我所知，它与第1点有关，并且是因为第2点：

1. 定位元素放置在浮动非定位兄弟元素之上。

2. 出现在渲染树中后面的元素覆盖其早期兄弟元素。

在您的示例中，具有红框的.elContainer实际上是定位的。 因此，上述规则1不适用，但我仍然包含它，因为这很有用。 然而，具有红框的.elContainer在源/渲染树中出现在.elContainer .someTextBlock之前，因此文本块在红框上方绘制。 如果在文本框中添加background-color，您将在视觉上注意到它在红框上方绘制。 请参见http://jsfiddle.net/PNktA/2/

请参考W3C规范中的第5和第8条规则，http://www.w3.org/TR/CSS21/zindex.html

- KajMagnus

---

感谢您的输入。在我的情况下，我使用z-index解决方案来实现这一点，因此该问题已经解决。在更复杂的页面情况下，有时会遇到一些小问题，但总体而言，它运行得相当不错。尽管如此，那时我更喜欢另一种方法。 - SquareCat

Answer 2

如果您在第一个elContainer元素上设置比第二个更高的z-index，那么您就可以成功地单击编辑控件。

- Brighty

---

谢谢您的提示！它是正确的，但我恐怕不能将其应用于我的系统（尽管它绝对是一个好的解决方案！）。我只是想知道是否有其他方法来处理这个问题。 - SquareCat

啊，真可惜，我还以为我已经把它完美解决了！ - Brighty

事实上，先生，您确实做到了。我成功地将其集成，只需在我的渲染器模块中为每个集合递减z-index变量即可。 - SquareCat

太好了！（哦，顺便说一下，我不是先生 :) ） - Brighty