link 的 z-index 问题

Question

我有两个div，一个header和一个section，section总是占据整个屏幕而header只占据一小部分.

在我的 section 里面，我有一个 link，您可以在下面的代码中看到：

* {
  margin: 0;
  padding: 0;
}
#header {
  width: 100%;
  background: green;
  height: 50px;
  z-index: 1;
}
#section {
  background: yellow;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  float: left;
  z-index: -1;

<div id="header">This is my header</div>
<div id="section">
  <br>
  <br>
  <br>
  <br><a href="#">Go to the link</a>
</div>

我需要在我的 header 中使用 z-index，因为如果我不使用，它就不会出现，因为 section 覆盖了整个屏幕。

可以看到DEMOHERE

在我将代码放入 JSFiddle 之前，我的问题是我无法单击 section 中的 link，但是在将代码放入 JSFiddle 之后，link正在工作。

为什么会这样？以及如何在我的网站上解决它？

Answer 1

因为黄色内容的absolute位置。您必须更改 top 值才能使其在没有 z-index 属性

的情况下工作

#section{
  background:yellow; 
  position:absolute; 
  top:50px; 
  bottom:0; 
  left:0; 
  right:0; 
  overflow:hidden; 
  float:left; 
}

Fiddle

然后，#section 在 DOM 树中的 #header 之后。这意味着它的默认值 z-index 设置为 2 并且 #section 的默认值是 1。这就解释了为什么它在 #header 的顶部。您还必须添加一个位置值，例如 position: relative; 到 #header 以使其适用于更改元素的顺序。

Fiddle with change of position in the DOM tree

Answer 2

您能否更新 CSS 以不使用 z-index 并将背景颜色应用于 BODY 标签？ JS Fiddle

*{
margin:0;
padding:0;
}
body {
  background:yellow; 
}
#header{
width:100%; 
background:green; 
height:50px; 
}
#section{
  // Intentionally blank
}

Answer 3

您不需要 z-index 和 position，您可以在 #section 中使用 height:100% 以及 body、html

或者如果您愿意，可以使用 height:calc(100% - 50px)

在 #section 中使用 calc()

body,
html {
  height: 100%;
  margin: 0
}
#header {
  width: 100%;
  background: green;
  height: 50px;
}
#section {
  background: yellow;
  height: 100% /* or -  height:calc(100% - 50px) */
}

<div id="header">
  This is my header!
</div>

<div id="section">
  <a href="#">Go to the link</a>
</div>

请注意，#header 中的 z-index 未被定位

link 的 z-index 问题

Problems with z-index with link

html

css

z-index