从后端加载的模态正在被其他元素覆盖

Question

我有一个html片段，后端被加载到我页面的main div中。它包含单击链接时显示的modal。问题是，modal是否能够被页面上的其他元素掩盖。设置z-index是没用的，因为如果header中的某个元素的z-index高于main div，modal将显示在header之后{1}}，无论其z-index如何。我目前正在通过使用javascript（jQuery）来clone modal，将克隆附加到body，然后删除原始modal来解决问题。这似乎是一个hacky解决方法，可能会导致潜在的问题，有没有更好的方法来做到这一点？模态通常如何加载以便它们不会遇到这个问题？

这是问题的一个方面：http://jsfiddle.net/kraxF/

这是HTML，正如你所看到的，DOM树中的模态相当低，如果它们的z-index比“load-by”高，则可能会被页眉或页脚或主要元素覆盖。 -backend”。

<div id="container">
    <div id="header">
        Header
    </div>
    <div id="main">
        Main
        <div id="loaded-by-backend">
            <div id="modal">
                Modal
            </div>
        </div>
    </div>
    <div id="footer">
        Footer
    </div>
</div>

Answer 1

如果您可以更改CSS，只需从position:relative删除#main即可。 http://jsfiddle.net/kraxF/3/