将一些东西放在模态之上(Zurb Foundation)

问题描述

我希望一个 div 出现在 Zurb Foundation 显示模式的顶部.

但是，我的 div 拒绝显示在模态之上.

模态的 z-index 是 1006.当我将顶部 div 设置为 1010，甚至 99999 时，它仍然位于模态下方.

我可以让它工作的唯一方法是将基础模式的 .reveal-overlay 的 z-index 设置为 0(即使是 1 也将它放在我的 div 之上)，但是弄乱了其他元素.

如何将元素置于 Zurb Foundation 模态之上?

解决方案

你的 div 需要在 dom 的顶层才能工作.

以下将起作用.

<h1>我的启示</h1>
<div style="z-index: 1100; width:500px; height: 500px;顶部:100px；position: absolute;left: 200px;">在显示顶部</div></html>

I want a div to appear on top of a Zurb Foundation reveal modal.

However, my div refuses to be shown on top of the modal.

The z-index of the modal is 1006. When I set my on-top div to 1010, or even 99999, it still sits underneath the modal.

The only way I can get it to work is by setting the foundation modal's .reveal-overlay's z-index to 0 (even 1 puts it on top of my div), but that messes up other elements.

How can I put an element on top of a Zurb Foundation modal?

解决方案

Your div needs to on the top level of the dom for this to work.

The following will work.

<div class="reveal">
<h1>my reveal</h1>
</div>

<div style="z-index: 1100; width:500px; height: 500px;
top: 100px; position: absolute;left: 200px;">On top of the reveal</div>

</body>
</html>

这篇关于将一些东西放在模态之上(Zurb Foundation)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！