Question

我创建了一个具有以下样式的叠加层：

#overlay-2 {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background: none repeat scroll 0 0 #000000;
opacity: 0.85;  
z-index: 10;
}`

我正在尝试让我的标题仍显示在叠加层上方。（我正在使用叠加层，当下拉菜单打开时，网站会变暗（使用叠加层），但标题和菜单仍然正常）。

这只是我的标题ID之一：

    #header_main {
    z-index: 11;
    position: relative; 
    }

和另一个：

#megaMenu {
position: relative;
z-index: 500;
}

但没有变化！我甚至把位置改为像叠加一样固定，但仍然没有变化。可能是什么导致了这个？另外，我听到有关z-index是否仍然与不同职位类型相关的混合信息。防爆。固定与相对无关。他们的z索引对彼此无关紧要。而其他人则说完全相反“只要它不是静态的，无论什么位置类型都无关紧要”

------------------------更新：--------------------- -------------- 这是html（来自firebug）wordpress网站。

<head>
<body id="top" class="home page page-id-1412 page-template-default logged-in stretched open_sans open_sans siteorigin-panels" itemtype="http://schema.org/WebPage" itemscope="itemscope">
    <div id="wrap_all">
        <header id="header" class="header_color light_bg_color mobile_drop_down" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
            <div id="header_meta" class="container_wrap container_wrap_meta">
            <div id="header_main" class="container_wrap container_wrap_logo">
            <div id="header_main_alternate" class="container_wrap">
            <div class="header_bg"></div>
        </header>
        <div id="main">
      </div>
    <div class="main_color avia-builder-el-9 el_after_av_slideshow_full masonry-not-first container_wrap fullsize">
    <div id="after_masonry" class="main_color container_wrap fullsize">
    <div id="av_section_3" class="avia-section main_color avia-section-default avia-no-shadow avia-builder-el-11 el_after_av_one_full container_wrap fullsize">
    <div id="after_section_3" class="main_color container_wrap fullsize">
    <div id="footer" class="container_wrap footer_color">
    <footer id="socket" class="container_wrap socket_color" itemtype="http://schema.org/WPFooter" itemscope="itemscope" role="contentinfo">
    <div id="login-box" class="login-popup">

//scripts etc..

    <div id="fb-root"></div>
    <div id="overlay-2" style="display: block;"></div>
</body>

Answer 1

现在编辑您已经展示了HTML：

您想在#header上方显示#overlay-2（位置：相对）（位置：已修复）。问题是#header位于由其父#wrap_all定义的堆叠上下文中，因此#wrap_all个孩子都不会高于或低于该堆叠上下文。如果#wrap_all没有定位，那么它（它的子节点）将低于#overlay-2，这可能就是你所看到的。

有几种可能的解决方案。

如果从#header中取出#overlay-2并将其放在与#header（同一父级）相同的级别，那么它将处于相同的堆叠上下文中，您可以使用z-index将这两个项目相对于彼此定位。如果您为#overlay-2提供更高的z-index，它将位于#wrap_all之上。

如果您希望#overlay-2, then you could make中的所有内容都高于be positioned and give it a＃wrap_all without changing your structure. But, if you only want z-index to be above, then you will have to pull it out of #jader z-index＃wrap_all`。

以下是对正在发生的事情的一些解释。

z-index有点复杂。

首先，position仅对“定位”元素产生任何影响（例如，将CSS z-index设置为auto以外的其他元素。

第二关，z-index仅在其堆叠上下文中向前或向后移动元素。堆叠上下文由其中一个父母决定。对于许多项目，堆叠上下文是其父项。这是许多人感到困惑的地方。他们认为两个项目（无论他们在DOM中的哪个位置）都应该完全基于他们的z-index值在堆叠顺序中定位，但只有在他们处于相同的堆叠环境中时才会出现这种情况（他们有同一控制的父母）。如果它们不在相同的堆叠上下文中，则堆叠上下文确定哪个位于另一个之上，而position: fixed仅影响项目在其自己的堆叠上下文中的分层方式。

第三，某些浏览器将z-index置于根级别堆叠上下文中，但某些其他浏览器不会将其置于根级别堆叠上下文中，因此如果＃overlay-2不是顶级对象，则浏览器可能会出现一些变化

有关#header_main的详细信息，请参阅this article。

而且，this article描述了如何定义堆叠上下文以及创建新堆栈上下文的内容。

因此，要完全回答您的问题，我们需要查看HTML结构，以了解#megaMenu和{{1}}在HTML和这些项目的所有父母的CSS中是如何相互关联的所以我们可以理解它们所处的堆叠环境。

Answer 2

{p> position属性是必须 z-index工作

使用

Position:relative;

编辑：也检查此答案https://stackoverflow.com/a/5218972/2967572

注意事项：

页面上的大多数元素都位于单个根堆叠上下文中，但是具有非自动z-index的绝对或相对定位的元素价值形成他们自己的堆叠背景（即他们所有的子项将在父项中进行z排序，而不是交错来自父母以外的内容）。从Chrome 22开始，位置：固定元素也将创建自己的堆叠上下文。

如何解释z-index如何使用不同的位置属性Here

z-index不工作，不知道为什么

2 个答案: