Question

我遇到了很大的麻烦，使我的页面显示正确定位和分层。

它要大得多，但基本布局与我在此处创建的完全相同： 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>

加载页面时隐藏

＃login-panel 。启动它的唯一方法是点击＃login-panel-button ，这还会模糊其他所有内容（除了＃login-panel-button ）。我通过显示/隐藏透明黑色背景＃background-blur 的全屏图像来模糊。这就是问题所在。

我想模糊其他所有内容，但不是＃login-panel 和＃login-panel-button 。所以我已将 z-index：1 分配给＃background-blur 和 z-index：2 分配给＃login-container 。掌握了一段时间，为什么它不起作用。其背后的原因是Chrome为 position：fixed 为每个元素创建了一个新的堆叠上下文。 z-index 分层是相对的，这意味着指定的 z-index 值仅适用于堆叠上下文（最近的自己创建堆叠上下文或根元素的祖先。所以我只在标题上下文中指定了我的＃login-panel 的 z-index：3 ，它有＆＃ 39;默认 z-index：0 （它类似于＃login-panel z-index：0.1 ），以及显示在＃background-blur 下方 z-index：1 。

当然我可以将标头的z-index 提升到 2 ，但是当我想要 #logo 时模糊（显示在＃background-blur 下方）。然后我可以通过分别 #logo 和＃login-panel 分别位置：固定创建单独的堆叠上下文，但我输了将它们（两侧）放置在800px中心容器中的能力，这是我需要的。

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

对于想要阅读良好的人，MDN有一篇非常详尽的文章（第4节中描述了堆叠上下文）： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index

Answer 1

如果您将登录容器移动到它自己的固定位置容器中，您可以为它提供与标题相同的尺寸，并且它自己的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

CSS z-index在Chrome中具有固定定位

1 个答案: