Question

我有两个div，一个header和一个section，section始终占据整个屏幕，header只占一小部分。< / p>

在我的section内，我有一个链接，您可以在下面的代码中看到：

＆＃13;

* {
  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;

＆＃13;

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

＆＃13;

我需要在z-index中使用header，因为如果我不使用，则不会显示，因为section涵盖整个屏幕。

您可以看到DEMO HERE

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

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

Answer 1

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

或者如果您希望通过calc()

使用#section中的height:calc(100% - 50px)

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

这是因为黄色内容的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 3

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

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

带链接的z-index问题

3 个答案: