css div float和zindex - > div not accessible

我有一个带有标题（顶部），左侧菜单，旁边主要内容和状态区域的网页（带有div元素）页面底部。菜单向右打开，因此我在主要内容上添加了z-index。现在，主要内容（按钮，输入字段）无法通过鼠标点击进行聚焦 - 该区域中的任何表单都无效（除非使用Tab键导航）。我注意到它的工作原理（但打破了页面设计），如果我先添加主要内容并使用float: right;然后再添加float: right;的菜单。css div float和zindex - > div not accessible

我敢肯定我不是第一个坚持这个，但还没有找到正确处理这个问题的方法。这里的来源是什么样子的问题：

<!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？

谢谢，约翰。

来源

2014-03-12 user3411565

的jsfiddle请。 –

[JsFiddle]（http://jsfiddle.net/Qzv64/） – Oriol

只需要从＃div-2中删除z-index（让它自然堆叠）http://jsbin.com/kesilovo/1/edit –

-1

问题是＃div-2的z-index是-1。如果您将z-index更改为＃div-g的z-index（可能为1）以上的任何内容，则它将起作用。 z-index页面上的“更高”值越高。

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

来源

2014-03-12 16:35:04 imtheman

的问题是，你使用负z-index：

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

这使得#div-2的内容来显示它的背景之下，所以你不能与他们进行互动。

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

来源

2014-03-12 16:35:16 Oriol

现在很简单！我将z-index：2添加到了div-1，并将z-index：1添加到了div-2，它看起来很完美！ – user3411565

@ user3411565很高兴听到它。随意标记答案被接受，如果它工作:) – Oriol

我个人从来没有使用-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; 
}

来源

2014-03-12 16:41:10 TTIWebDev

css div float和zindex - > div not accessible

回答

相关问题