chrome 和 safari 上的 z-index 问题（firefox 很好）答案

【问题标题】：z-index issue on chrome and safari (firefox is fine)chrome 和 safari 上的 z-index 问题（firefox 很好）
【发布时间】：2015-03-30 21:42:47
【问题描述】：

我似乎在 chrome 和 safari 上遇到了一个愚蠢的 z-index 问题，我找不到任何解决方案。

我准备了一个小提琴：

http://jsfiddle.net/j3kyvnym/1/

向下滚动时，页面内容应在标题（灰色条）上方但在徽标下方。在 Firefox 中按预期工作，但 chrome 和 safari 不会在徽标元素上应用 z-index。

我错过了什么吗？（我不希望标志是绝对的或固定的）

HTML：

<header>
    <div class="logo">Logo</div>
</header>

<div id="page-body">
    Page Content
</div>

CSS（简体）：

header {
    background: #f0f0f0;
    position: fixed;  
}

.logo {
    position: relative;
    z-index: 10;
}

#page-body {
    z-index: 1;
    position: relative;
}

【问题讨论】：

说实话，根据我对 z-index 工作原理的了解，对于给定的 html 结构，除非您使标题的背景透明，否则无法做到这一点。然后在视觉上它看起来就像你想要的那样。我不确定为什么 FF 会以这种方式显示它。也许有一种方法，我只是不知道，我很想看看是否有适当的方法来实现这一目标
我认为这没什么大不了的，但显然它是。我认为在这种情况下，Firefox 以正确的方式处理它。可惜的是 chrome + safari 没有这样做。正如你所说，我认为我需要更改 html 结构，或者找到其他解决方法
我认为 FF 的处理方式是错误的，这种情况很少见，但也许我错了。

标签： css google-chrome safari z-index

【解决方案1】：

您的徽标位于父级标题中，并将继承其 z-index。所以现在你要求#page-body 在两层之间编织，但它不能。

一种解决方案是将您的 z-index 放在标题上并使其背景透明：

http://jsfiddle.net/keithburgie/j3kyvnym/5/

header {
 padding: 20px 0;
 background: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;  
 z-index: 10;
}

如果这对您不起作用，您可以将徽标放在页眉元素之外，将其位置更改为固定并使用负边距将其放在页眉顶部：

http://jsfiddle.net/keithburgie/j3kyvnym/8/

<div class="container">

<header></header>

<div class="logo">Logo</div>

<div id="page-body">
    Page Content
</div>

【讨论】：

感谢您的回答。我想当我不对父标题应用 z-index 时，徽标不会继承它的 z-index。 Firefix 会按照我的意愿去做。但是，我会尝试为它找到另一种解决方案。透明背景不好，因为内容元素无法访问（例如锚标记），因为标题覆盖了它。

【解决方案2】：

从 .logo 和 #page-body 中删除 z-index 和位置

.logo {
   height: 40px; line-height: 40px;
    width: 60px;
    background: red;
    color: #ffffff;
    text-align: center;
    margin-left: 20px;
}

#page-body {
      margin-top: 100px; 
   margin-bottom: 1000px;
}

here is fiddle

【讨论】：

我认为 OP 希望文本位于徽标后面但高于 header
感谢您的回答，但是内容在整个标题的后面@Huangism，没错
现在内容在标题和徽标上方。我希望它是“中间”。在标题上方（灰色条）但在徽标下方。