在Chrome中使用固定位置的CSS z-index

我遇到了很大的麻烦，使我的页面显示正确定位和分层。在Chrome中使用固定位置的CSS z-index

这是更大的，但基本布局是完全一样的，因为我创造了它在这里： http://codepen.io/rjk/pen/AsGfm

页眉和页脚是固定的，当页面内容是围绕滚动不动。什么是真正重要的是头，其结构是：

<div id="login-container"> 
    <button id="login-panel-button">Login</button> 
    <div id="login-panel"> 
    <form id="login-form"> 
     ... 
    </form> 
    </div> 
</div>

＃加载页面时登录面板是隐藏的。唯一的方法是点击＃登录面板按钮，除此之外，它还模糊了一切（除了＃登录面板按钮）。我通过显示/隐藏透明黑色背景的全屏图像来模糊图像＃background-blur。问题来了。

我想模糊了一切，但不是＃登录面板和＃登录面板的按钮。因此，我已分配z索引：1到＃背景模糊和的z-index：2至＃登录容器。花了一段时间才明白，为什么它不起作用。其原因是，Chrome为每个具有排名的元素创建一个新的堆叠上下文：固定的。 z-index分层是相对的，这意味着指定的z-索引值仅适用于它的堆栈上下文（最接近于自己创建堆栈上下文的祖先或根元素）。只有在头的方面，它有它的默认的z-index我＃登录面板的3：所以我指定的z-index 0（它就像是ž＃登录面板 -index：0.1），并显示在＃background-blur与z-index：1。

当然，我可能只是提高头的z-index的到，但不是当我想#logo被模糊（下方显示＃背景模糊）。然后我可以分别创建#logo和＃登录面板单独创建单独的堆栈上下文位置：固定，但我失去了将它们放置在800px居中容器中的能力（在两侧）我需要。

该问题仅与Chrome相关。尝试运行我在Firefox中提供的笔，一切都像魅力一样。

对于任何人想要一个良好的阅读，MDN有一个很好的彻底文章（与堆叠内容第4节）： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index

来源

2014-02-26 Robert Kusznier

详情前提是你不错，但你应该考虑砍他们的时间，来点......用户将无法读取的解释，即大块:) –

如果登录容器是位置固定的，为什么不把它放在body中而不是在header中 – Pete

pete，＃login-container有位置相对。 –

如果身体内移动的登录容器到它自己固定的位置容器，你可以给它相同的尺寸为您的头和它自己的z-index，所以你就可以达到你想要的东西：

HTML

<body> 
    <div class="center"> 
    <div id="login-container"> 
     <button id="login-panel-button">Login</button> 
     <div id="login-panel"> 
     <form id="login-form"> 
      <label for="username">Username:</label> 
      <input type="text" name="username" id="username"></input> 
      <label for="username">Password:</label> 
      <input type="password" name="password" id="password"></input> 
     </form> 
     </div> 
    </div> 
    </div> 
<header> 
    etc...

CSS

header, 
footer, 
.center { 
    width: 800px; 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
} 

header, 
.center { 
    position: fixed; 
    top: 10px; 
} 

.center { 
    z-index:2; 
}

Updated Codepen

来源

2014-02-26 15:32:50 Pete

在Chrome中使用固定位置的CSS z-index

回答

相关问题