我有一个网页(div元素)与标题(顶部)，左侧的菜单，旁边的主要内容和在页面底部的状态区。菜单向右打开，所以我在主要内容上添加了z索引。现在，主要内容(按钮、输入字段)不能通过鼠标点击来集中-该区域的任何表单都变得无用(除非使用tab键进行导航)。我注意到它的工作(但打破了页面设计)，如果我先添加主要内容，并使用float: right;，然后添加菜单与float: right;以及。
我相信我不是第一个被困在这个问题上的人，但我还没有找到正确处理这个问题的方法。下面是出现问题时的源代码:
<!DOCTYPE html>
<html>
<head>
<style>
#div-g {
width: 100%;
border: 1px solid;
border-color: #000000;
border-radius: 5px;
}
#div-t {
width: 95%;
border: 1px solid;
border-color: #4422d3;
border-radius: 5px;
margin-left: 1em;
margin-right: 2em;
}
#div-1 {
float: left;
border: 1px solid;
border-color: #ee00b4;
border-radius: 5px;
height: 50px;
width: 20%;
margin: 1em;
}
#div-2 {
float: left;
border: 1px solid;
border-color: #00eec2;
border-radius: 5px;
height: 100px;
width: 70%;
margin: 1em;
position: relative;
z-index:-1;
}
#div-3 {
clear: both;
width: 95%;
border: 1px solid;
border-color: #eeeeee;
border-radius: 5px;
margin: 1em;
}
</style>
</head>
<body>
<div id="div-g" style="text-align: left;">DIV-G (top)
<div id="div-t">DIV-T</div>
<div id="div-1">DIV-1</div>
<div id="div-2">DIV-2</div>
<div id="div-3">DIV-3</div>
DIV-G (bottom)
</div> <!-- div -g -->
</body>
</html>
如果你将其保存为html文件，你会注意到文本"DIV-2"不再是可选择的了。不使用float: right可以工作吗?
谢谢,约翰。
问题是您使用了负的z-index:
#div-2 {
z-index: -1;
}
这使得#div-2的内容显示在其背景之下，因此您无法与它们交互。
如果你想让#div-2出现在其他元素的下面，使用一个比其他元素低的z-index，但不能是负的
我个人从来没有使用过-1的z-index，你可以试试:
#div-1 {
float: left;
border: 1px solid;
border-color: #ee00b4;
border-radius: 5px;
height: 50px;
width: 20%;
margin: 1em;
z-index:10;
}
#div-2 {
float: left;
border: 1px solid;
border-color: #00eec2;
border-radius: 5px;
height: 100px;
width: 70%;
margin: 1em;
position: relative;
z-index:1;
}
问题是#div-2的z-index是-1。如果您将z-index更改为#div-g的z-index以上的任何内容，可能是1，那么它将工作。z-index越高，它在页面上的位置越"高"。