css - chrome 和 safari 上的 z-index 问题(firefox 没问题)

Question

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

我准备了一个 fiddle :

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

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

我错过了什么吗？(我不希望 Logo 是绝对的或固定定位的)

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 位于父级(标题)内，并将继承其 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;
}

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

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

<div class="container">

<header></header>

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

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