带链接的z索引问题
带链接的z索引问题
提问于 2016-04-19 15:20:38
我有两个div，一个header和一个section，section总是占据整个屏幕，header只占一小部分。
在我的section中，我有一个链接，您可以在下面的代码中看到：
* {
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>
我需要在我的z-index中使用header，因为如果我不使用，它就不会出现，因为section覆盖了整个屏幕。
您可以看到演示这里
在我将代码放入JSFiddle之前，我的问题是我无法单击section中的链接，但是在将代码放入JSFiddle之后，该链接正在工作。
为什么会发生这种情况？如何在我的网站上解决这个问题？
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-04-19 15:29:39
您不需要z-index和position，只需在#section中使用height:100%和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中没有被定位
Stack Overflow用户
发布于 2016-04-19 15:27:32
这是因为黄色内容的absolute位置。您必须更改top值，使其在不使用z-index属性的情况下工作。
#section{
background:yellow;
position:absolute;
top:50px;
bottom:0;
left:0;
right:0;
overflow:hidden;
float:left;
}然后，#section在DOM树中跟踪#header。这意味着z-index的默认值设置为2，#section的默认值为1。这就解释了为什么它位于#header的顶部。您还必须添加一个位置值，例如，position: relative;到#header中，以使其与更改元素的顺序一起工作。
Stack Overflow用户
发布于 2016-04-19 15:29:37
您能否只更新CSS以不使用z索引，并将背景色应用于正文标记？JS Fiddle。
*{
margin:0;
padding:0;
}
body {
background:yellow;
}
#header{
width:100%;
background:green;
height:50px;
}
#section{
// Intentionally blank
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36722688
复制相关文章
相似问题
腾讯云开发者
