CSS下拉列表显示在下面的下拉框，IE6，IE7，绝对定位bug [英] CSS dropdown list showing behind the dropdown below, IE6, IE7, absolute positioning bug

问题描述

我遇到的css中发现的最疯狂的问题之一...

I'm facing one of the craziest problems I've ever found in css...

我有两个CSS-jQuery水平下拉列表，一个和一个

I have two CSS-jQuery horizontal dropdowns, one up and one below, displaying the drop-list when clicking on it.

问题出现在我点击IE6和IE7的上部下拉列表中，绝对定位的元素越过相对定位的元素。

The problem comes when I click the upper dropdown in IE6 and IE7, and absolute positioned element goes over relative positioned ones. Upper dropdown list (absolute) shows behing the dropdown (relative) below.

JavaScript：

JavaScript:

$("button").click(function(e){
    $(".menu").hide();
    $(this).siblings(".menu").show();
    e.stopPropagation()
});
$(document).click(function(){$(".menu").hide()});

HTML：

<div class="top">
    <div class="dropdown">
        <button>Dropdown1 v</button>
        <div class="menu">
            <a href="#link">Option a</a>
            <a href="#link">Option b</a>
            <a href="#link">Option c</a>
        </div>
    </div>
    <div class="dropdown">
        <button>Dropdown2 v</button>
        <div class="menu">
             <a href="#link">Option d</a>
             <a href="#link">Option e</a>
            <a href="#link">Option f</a>
        </div>
    </div>
</div>

CSS：

.dropdown{float:left;display:inline;clear:left;position:relative}
.menu{position:absolute;left:0;top:22px;z-index:1}
.menu  a{display:block}

.menu{display:none;border:1px solid #ccc;padding:3px;background:#ffffe0}

以下是示例：

http://jsfiddle.net/AEBaW/

解决方案：

http://jsfiddle.net/AEBaW/ 2 /

推荐答案

在IE中存在一个已知的z-index问题。对于绝对定位的元素，它对待z-index不同于对相对定位的元素。它就像你有两组z索引。

There is a known issue with z-index in IE. It treats z-index differently for absolute positioned elements than it does for relative positioned elements. It's like you have two sets of z-indexes. You might be able to fix it by using wrappers with the same positioning, if you cannot get all your elements to use the same positioning.

编辑1：

http：/ /caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/

编辑2：

z index bug

Z-Index IE错误修复

Internet Explorer z-index错误？

编辑3：

jQuery解决方案：

jQuery Solutions:

http://www.vancelucas.com/blog/ fixed-ie7-z-index-issues-with-jquery /

http://webdeveloper2.com/2010/01/how-to-fix-the-ie-z -index-bug-with-jquery /

这篇关于CSS下拉列表显示在下面的下拉框，IE6，IE7，绝对定位bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！