[英]Floated DIVs overlapping incorrectly
In the following code, I'd like the #nav
div to overlap the #content
div. 在下面的代码中,我希望#nav
div与#content
div重叠。 Even though #nav
has a higher z-Index value, it is still being overlapped by #content
. 即使#nav
具有较高的z-Index值,它仍被#content
重叠。
FIDDLE: http://jsfiddle.net/Zfcba/ 内容: http : //jsfiddle.net/Zfcba/
HTML: HTML:
<div id="page">
<div id="nav"></div>
<div id="content"></div>
</div>
CSS: CSS:
#page
{
margin: 20px 0px;
padding: 10px;
display: block;
width: 70%;
height: 200px;
border: 1px solid gray;
}
#nav
{
float: left;
width: 40px;
height: inherit;
border: 1px solid red;
z-index: 999;
}
#content
{
float: left;
margin-left: -20px;
width: 200px;
height: inherit;
border: 1px solid blue;
background: lightgray;
z-index: 0;
}
Pretty simple code, but I can't understand what I'm doing wrong. 很简单的代码,但是我不明白我在做什么错。 Any help would be appreciated. 任何帮助,将不胜感激。
Note: I tried the same without the outer div ( http://jsfiddle.net/Zfcba/1 ). 注意:没有外部div( http://jsfiddle.net/Zfcba/1 ),我尝试了相同的操作。 Still the same problem. 还是一样的问题。 :( :(
将此添加到您的CSS
#above{position:absolute;}
z-index
only works for absolute
positioned elements. z-index
仅适用于absolute
定位的元素。 As the browser ignores the value for z-index
, it will then render it in the order the elements are in your html-code. 当浏览器忽略z-index
的值时,它将按照元素在您的html代码中的顺序呈现它。 As #content
is later in your code than #nav
, #content
will be displayed over #nav
. 由于#content
在代码中比#nav
,因此#content
将显示在#nav
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.