Question

我有一个div，我希望它出现在它下面的一些UI元素之上。这是我的HTML：

<div class="modal addmenu">
        <fieldset>
            <p>
                <div>
                <table><tr>
                    <td><div>Item 1</div></td>
                    <td><div>Item 2</div></td>
                </tr></table>
                </div>
            </p>

            <!-- This should be under the p above -->
            <p class="newmenu">
                <label for="new-menu">Name of a new menu:</label>
                <span>
                    <input id="new-menu">
                </span>
            </p>
        </fieldset>
</div>

我有以下CSS：

.modal.addmenu fieldset div 
{
   z-index: 5000; /* Attempt to show div over p.newmenu */
   background-color: #ffffff; /* force white background? */
}

.modal.addmenu fieldset table { height: 70px; margin: 0px; padding: 0px; }
.modal.addmenu fieldset table td { vertical-align: middle; text-align: center; line-height: 25px; font-weight: bold; color: #404040; font-size: 15px; }
.modal.addmenu fieldset table td div { min-width: 100px; max-width: 100px; height: 60px; border: 1px solid #c0c0c0; overflow: hidden; margin: 5px; padding: 15px; }
.modal.addmenu fieldset table td div.new { font-style: italic; text-decoration: underline; }

.modal.addmenu fieldset p.newmenu
{
    margin-top: -30px;
    z-index: 0; /* attempt to show this under div above */
}

基本上，我希望第一个<p>标记在第二个<p>标记之上呈现。我不希望能够看到“新菜单的名称”和输入区域。然而，尽我所能，这些元素仍然流血。我已经确认Chrome，Firefox和IE8。

如果您想知道，我使用负上边距定位元素而不是仅使用p.newmenu或display隐藏visibility的原因是我要申请一个将从div下方“滑出”p.newmenu的动画。因此，我需要{div}完全覆盖p.newmenu。

我已尝试在几乎所有内容上设置z-index属性，我尝试了不同的背景颜色，并且我已经弄清楚了我能想到的所有其他风格。有谁知道如何获得我寻求的行为？谢谢！

小提琴链接：http://jsfiddle.net/rm58T/

Answer 1

只有relative，absolute或fixed位置的元素才会受到z-index的影响。

将position:relative;添加到.modal.addmenu fieldset div和.modal.addmenu fieldset p.newmenu。

Fixed demo

在p，p之上渲染一个div的问题仍然可见

1 个答案: