Question

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

我准备了一个小提琴：

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

您的徽标位于父级标题内，并将继承其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>

Answer 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

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

2 个答案: