Question

我有一个网页（带有div元素），标题（顶部），左侧菜单，旁边的主要内容以及页面底部的状态区域。菜单向右打开，因此我在主要内容上添加了z-index。现在主要内容（按钮，输入字段）无法通过鼠标单击进行聚焦 - 该区域中的任何表单都无法使用（除非您使用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的情况下工作吗？

谢谢，约翰。

Answer 1

问题是您使用了否定z-index：

#div-2 {
    z-index: -1;
}

这使#div-2的内容显示在其背景下方，因此您无法与它们互动。

如果您希望#div-2显示在其他元素下方，请使用比其他元素更低的z-index，但使用非负的元素。

Answer 2

我个人从未使用过-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;
}

Answer 3

问题是＃div-2的z-index是-1。如果将z-index更改为＃div -g的z-index之上的任何值，可能为1，那么它将起作用。 z-index页面上的“更高”越高。

http://jsfiddle.net/imtheman/YFfDL/

css div float和zindex - ＆gt; div无法访问

3 个答案: