【问题标题】:z-index not working, not sure whyz-index 不工作,不知道为什么
【发布时间】:2014-01-27 13:36:22
【问题描述】:

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

#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>

【问题讨论】:

标签: css


【解决方案1】:

现在您已经展示了您的 HTML 进行编辑:

您想在#overlay-2(位置:固定)上方显示#header(位置:相对)。问题是#header 位于由其父级#wrap_all 定义的堆栈上下文中,因此#wrap_all 子级中的任何一个都不会高于或低于该堆栈上下文。如果#wrap_all 本身没有定位,那么它(以及它的孩子)将低于#overlay-2,这可能就是您所看到的。


有几种可能的解决方案。

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

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


这里有一些解释。

z-index 有点复杂。

首先,z-index 仅对“定位”元素有任何影响(例如,将 CSS position 设置为 auto 以外的其他内容的元素。

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

第三,position: fixed 被某些浏览器放入根级堆栈上下文中,但其他一些浏览器则不会,因此如果您的#overlay-2 不是顶级对象,则浏览器可能会出现一些变化。

有关z-index 的更多详细信息,请参阅this article

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

因此,要完全回答您的问题,我们需要查看 HTML 结构,以了解 #header_main#megaMenu 在 HTML 和这些项目的任何父项的 CSS 中如何相互关联,以便我们了解他们在哪个堆叠上下文中。

【讨论】:

  • 1+ 很好的解释;我感觉#overlay-2#header_main 的父母。这可能是您所说的堆叠上下文。
  • 感谢您提供的信息!我不知道他们必须在相同的堆叠环境中/共享相同的父母。我认为这是这里的问题。这两个元素都在 html 的正文部分。叠加层位于它自己的主 div 中(关于主体的第一级 div)。标题广告菜单的内容在一个单独的主 div 中(同样关于正文)。所以我在想,如果我将叠加层添加到与我想要在叠加层上方显示的项目相同的 div 中,一切都应该很好吗?
  • @user3187895 - 当然,如果您将两个具有 position: relative 的元素放在同一个父级中,那么它们将位于相同的堆叠上下文中,因此 z-index 将控制哪个在另一个之上。你不必那么直接地实现控制,但这是最简单的方法,所以如果这很容易做到,那么这将解决你的问题。如果您编辑问题以显示这些元素的现有 HTML 层次结构以及元素及其父级的任何相关 CSS,那么我们可以更具体地回答(所有这些信息都是理解堆叠上下文所必需的)。
  • @jfriend00 - 感谢您的所有帮助!我用 html 更新了我的原始帖子。 #overlay-2 位于底部,是主体的“主要”div。 #Header_main 靠近顶部,我什至不知道该怎么称呼它。我使用 JS 插入了#overlay-2。如果只是将其移动到层次结构中的正确位置,那么我会这样做(希望如此)。
  • @user3187895 - 现在您已经展示了您的 HTML,我在答案的开头添加了几个部分。
【解决方案2】:

css position 属性是z-index 工作的必须

使用

Position:relative;

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

注意事项:

页面上的大多数元素都在一个单一的根堆叠上下文中,但是 具有非自动 z-index 的绝对或相对定位元素 值形成它们自己的堆叠上下文(也就是说,它们的所有 子级将在父级内按 z 顺序排列,不会交错 包含来自父级外部的内容)。从 Chrome 22 开始,位置:固定 元素也会创建自己的堆叠上下文。

解释了 z-index 如何与不同的位置属性一起工作Here

【讨论】:

  • 所有元素都已定位;看看上面的 CSS。
  • 感谢您的帮助@SajadLfc
猜你喜欢
  • 2012-02-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多