文章/答案/技术大牛

发布

社区首页 >问答首页 >Z-索引不工作，不确定原因

问Z-索引不工作，不确定原因
EN

Stack Overflow用户

提问于 2014-01-27 04:17:09

回答 2查看 267关注 0票数 1

我创建了一个覆盖层，其样式如下：

#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指数是否仍然适用于不同头寸类型的混合信息。例如。固定的和相对的没有任何意义。他们的z指数对彼此来说并不重要。而另一些人则相反，“只要不是静态的，不管是什么位置类型”。

------------------------UPDATED:-----------------------------------这里是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>

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-01-27 04:42:52

编辑现在您已经显示了您的：

您希望显示#header (位置:相对)高于#overlay-2 (位置:固定)。问题是，#header是在它的父#wrap_all定义的堆叠上下文中，因此没有一个#wrap_all子级会高于或低于该堆叠上下文。如果#wrap_all本身没有定位，那么它(以及它的子程序)将低于#overlay-2，这可能就是您所看到的。

有几种可能的解决方案.

如果您将#header从它的父级中取出，并将其放在与#overlay-2 (相同的父级)相同的级别上，那么它将处于相同的堆叠上下文中，您可以使用z索引将这两项相对于另一项进行定位。如果你给#header一个更高的z指数，它将在#overlay-2之上.

如果您希望#wrap_all中的所有内容都高于#wrap_all

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

z-index有点复杂。

首先，z-index只对“定位”元素有任何影响(例如，将CSS position设置为auto以外的元素)。

其次，z-index只在其堆叠上下文中向前或向后移动元素。堆叠环境是由它的父母之一决定的。对于许多项，堆叠上下文是它们的父项。这就是很多人感到困惑的地方。他们认为，两个项目(无论它们在DOM中的位置)应该完全基于它们的z-index值按堆叠顺序放置，但只有当它们处于相同的堆叠上下文中(它们具有相同的控制父级)时才是这样。如果它们不在相同的堆叠上下文中，那么堆叠上下文将决定哪个在另一个堆叠上下文之上，而z-index只会影响项目如何在自己的堆叠上下文中分层。

第三，position: fixed由一些浏览器放入根级堆叠上下文，而不是由其他浏览器放置，因此如果您的#overlay 2不是顶级对象，您可能会通过浏览器获得一些可变性。

有关这篇文章的更多细节，请参见z-index。

而且，这篇文章描述了如何定义堆叠上下文以及如何创建新的上下文。

因此，要完全回答您的问题，我们需要查看HTML结构，以了解#header_main和#megaMenu在HTML和这些项目的任何父级的CSS中是如何相互关联的，这样我们就可以了解它们所处的堆叠上下文。

票数 3

Stack Overflow用户

发布于 2014-01-27 05:01:03

css position属性是用于css工作的。

使用

Position:relative;

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

注意事项：

页面上的大多数元素都在一个单一的根堆叠上下文中，但是具有非自动z索引值的绝对或相对位置的元素形成了它们自己的堆叠上下文(也就是说，它们的所有子元素都将在父元素中被z排序，而不会与父元素之外的内容交织)。从Chrome 22开始，定位:固定元素也将创建自己的堆叠上下文。

这里解释了z-索引如何处理不同位置的属性。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21372937

复制

相似问题

问Z-索引不工作，不确定原因
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Z-索引不工作，不确定原因EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Z-索引不工作，不确定原因
EN