位置相对重叠 float-left
对于专门的 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/ 如果从第一个外部容器中删除浮动，您将能够单击编辑按钮。如果保留浮动，则无法单击它。
我试图找到一个在这里有效的解决方案，但我失败了。有谁知道我该如何解决这个问题？
如果该解决方案仅适用于 FF 和 Safari 也没关系，因为我可以要求在我的后端使用这些浏览器。
For a back-end solution of a CMS exclusively, I wanted to enable the user to switch any CMS element to float: left on purpose. However, I had to find that as all my container elements also use relative positioning, any element that is placed next to a floated one, will overlap that one (only as a block, not by content) and thus render the user incapable of using any of the other elements controls.
<div id="container1" class="elContainer" style="float: left;"></div>
<div id="container2" class="elContainer" style=""></div>
.elContainer {
position: relative;
}
You can try this JSFiddle setup to test the issue: http://jsfiddle.net/PNktA/
If you remove the float from the first outer container, you will be able to click the edit button. If you keep the float, you cannot click it.
I tried to find a solution that works here, but I failed in doing so. Does anyone know how I can fix this?
It is alright if the solution works in FF and Safari only, as I can demand usage of those browsers for my back-end.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
Brighty已经提供了解决方案，但也许我可以解释为什么“问题”实际上发生了。
据我所知，它与第 1 点有关，并且由于第 2 点：
定位元素放置在浮动非定位同级元素之上。< /p>
在渲染树中稍后出现的元素绘制在其较早的兄弟元素之上。
在您的示例中，带有红色框的 .elContainer 已实际定位。所以上面的规则 1 不适用，但我还是把它包括在内，因为了解它很有用。但是，带有红色框的
.elContainer出现在源/渲染树中的.elContainer .someTextBlock之前，因此文本块是画在红色盒子的上面。如果您向文本框添加背景颜色，您会直观地注意到它绘制在红色框上方。请参阅 http://jsfiddle.net/PNktA/2/请参阅 < a href="http://www.w3.org/TR/CSS21/zindex.html" rel="nofollow">W3C 规范，http://www.w3.org/TR/CSS21/zindex.html
Brighty has already provided a solution, but perhaps I could explain why the "problem" is actually happening.
As far as I've understood, it's related to bullet point 1, and because of point 2:
Positioned elements are placed above floating non-positioned siblings.
Elems that appear later in the rendering tree are painted above their earlier siblings.
In your example, the
.elContainerwith the red box is actually positioned. So rule 1 above does not apply, but I included it anyway because it's useful to know. However, the.elContainerwith the red box appears before the.elContainer .someTextBlockin the source / rendering tree, and therefore the text block is painted on top of the red box. If you add abackground-colorto the text box, you'll visually notice that it's painted above the red box. See http://jsfiddle.net/PNktA/2/Refer to rule 5 and 8 in the W3C spec, http://www.w3.org/TR/CSS21/zindex.html
如果您在第一个 elContainer 元素上设置的 z-index 高于第二个 elContainer 元素，则可以成功单击编辑控件。
If you set a higher z-index on the first elContainer element than the second you can then click the edit control successfully.