html - 链接的 z-index 问题

Question

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

在我的部分中，我有一个链接，您可以在下面的代码中看到:

* {
  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 涵盖了整个屏幕。

可以看DEMO HERE

在将代码放入 JSFiddle 之前，我的问题是我无法单击 部分 内的链接，但将代码放入 JSFiddle 后，链接可以正常工作。

为什么会发生这种情况？以及如何在我的网站上解决这个问题？

Answer 1

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

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

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>

请注意，您有 z-index在#header没有被定位