z-index 关于 chrome 和 safari 的问题（firefox 没问题）

Question

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

我准备了一个fiddle:

向下滚动时，页面内容应位于 header（灰色条）上方但徽标下方。在 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;
}

Answer 1

从 .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

Answer 2

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

一个解决方案是将您的 z-index 放在 header 上，并使其背景为 transparent：

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

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

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

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 关于 chrome 和 safari 的问题（firefox 没问题）

z-index issue on chrome and safari (firefox is fine)

css

google-chrome

safari

z-index