IE7 Z-Index问题-上下文菜单

Question

我有以下带有关联上下文菜单的按钮    <div class="control-action">         <button>Action</button>         <ul style="display:none">            <li class="action-remove">Remove</li>            <li class="action-detail">Detail</li>            <li class="action-assigned">Assign</li>        </ul>    </div> 单击该按钮时，关联的内容ul在其下方显示为上下文菜单。在IE 7以外的所有浏览器上，此功能都非常有效。在IE7中，上下文菜单（ul）显示在其下方的按钮下方。我想这可能是由于堆栈上下文如何解析这些元素。我的CSS目前看起来像这样：.control-action{    position: relative;    text-align:right;    width:100px;    }.control-action ul{    position:absolute;    z-index: 10000;    list-style:none;}关于我在做什么错的任何想法吗？

Answer 1

IE7之前的IE使用最接近的祖先来确定堆栈上下文。您也在IE6中看到吗？

将按钮放在ul之后，然后尝试。

Answer 2

我已经通过更改元素顺序解决了这一问题。我已经从同时包含按钮和菜单中删除了相对位置元素，并使其仅成为菜单的父元素。

    <div class="control-action" style="float:right"> 

        <div class="control-action-menu">

            <ul style="display:none">

                <li class="action-remove">Remove</li>

                <li class="action-detail">Detail</li>

                <li class="action-assigned">Assign</li>

            </ul>

        </div>

        <button>Action</button> 

    </div> 

通过此标记更改，css已更改为以下内容：

.control-action

{

    text-align:right;

    width:100px;    

}

.control-action-menu

{

    position:relative;

    z-index:1;

}

.control-action ul

{

    position:absolute;

    z-index: 10000;

    list-style:none;

}