CSS IE7 错误 - z-index 或其他影响我的绝对 div 的属性，它被下面的其他定位 div 阻止答案

【问题标题】：CSS IE7 bug - z-index or other property affecting my absolute div, which is being blocked by other positioned divs belowCSS IE7 错误 - z-index 或其他影响我的绝对 div 的属性，它被下面的其他定位 div 阻止
【发布时间】：2012-03-02 21:12:35
【问题描述】：

我网站的标题有一个按钮，单击该按钮时，应该会弹出一个弹出窗口，里面有一个表单（就在按钮下方），允许客户搜索网站。

执行此操作的我的 Jquery 代码：

<script type='text/javascript'>
$(document).ready(function () { 
    $('#search-my-size-inner').click(function() {
        $('#search-my-size-lightbox').toggle(); 
        $("#search-my-size-lightbox").css("z-index","1000");
    }); 
});     
</script>

我的 div，search-my-size-lightbox，具有以下 CSS。

.lightbox-search-my-size { color: #673645; opacity: 0.9; filter:alpha(opacity=90); background: #fff; }
#search-my-size-lightbox { position: absolute; width:390px; right: 0; top: 26px; display: none; }

而 div 是：

<div id='search-my-size-lightbox' class='lightbox-search-my-size'>my content </div>

这适用于除 IE7 之外的所有浏览器。 'z-index' 是不必要的，因为我可以从 CSS 中做到这一点，但对于 IE7 来说值得一试，但仍然没有修复错误。

错误是 div 被下面的其他几个绝对和相对元素“隐藏”（或阻止）。如果我将 div 向下移动到“/body”标签之前，那么 div 就会显示。但是，我需要它在其父“相对”标记内的代码中定位正确。

div 比正常内容显示还好，只是标题下方有一些大的主页横幅，有几个相对和绝对的 div，它们阻止了弹出内容。如果我删除那些“位置”属性，那么弹出窗口显示正常，但是主页横幅的布局当然是混乱的，所以这不是一个解决方案。

另外，如果我将 #search-my-size-lightbox 更改为 position: relative，那么它会起作用，但这只是将内容向下推，我需要一个绝对的、类似于弹出窗口的 div。

以下内容看起来很有用，但似乎对我不起作用： 1.Positioning divs with z-Index in Internet Explorer 7 2.http://www.sitepoint.com/fix-disappearing-absolute-position-element-ie/ 3.IE7 relative/absolute positioning bug with dynamically modified page content

任何建议将不胜感激，非常感谢！

【问题讨论】：

标签： css

【解决方案1】：

问题似乎与堆叠上下文有关。 z-index 属性仅影响 single 父级中子级的堆叠顺序，而不影响具有不同父级的元素。有关这方面的更多信息，请参阅YUI Overlay documentation 的“了解 z-index 和堆叠上下文”部分。

【讨论】：