绝对位置的z索引比固定位置大 [英] Position absolute has greater z-index than position fixed
问题描述
我有一个与相对位置有关的元素的问题.问题是我有一个标题,标题的位置是固定的,内容是相对的.如果我向下滚动内容,则该元素将放在标题的前面.我尝试使用z-index,但无法正常工作.我在标题上放了 z-index:999
.
在这里您可以看到我的
修正示例
标头样式存在问题,有两个冒号 ::
用于处理z-index属性值.
.header {宽度:960px;背景:#43484A;高度:80px;位置:固定;顶:0;z索引:9999;/*删除了多余的内容:这里*/}
固定示例 http://jsfiddle.net/kUW66/2/
I have a poblem with an element that is positioned relative. The problem is that I have a header with position fixed and content which is positioned relative. If I scroll down the content the element is put in front of the header. I tried with z-index but I just can't get it to work. I have put z-index:999
on header.
Here you can see my jsFiddle
Here is a picture:
The z-index
on the relative positioned element should be lower than the z-index
on the fixed position element. Here is a quick example:
HTML
<div id="fixed">Fixed Position</div>
<div id="relative">Relative Position</div>
CSS
body{
height: 3000px;
}
#fixed{
top: 0;
height; 100px;
background: green;
width: 100%;
position: fixed;
z-index: 2;
}
#relative{
position: relative;
top: 100px;
left: 50px;
height: 100px;
width: 100px;
background: red;
z-index: 1;
}
Working Example: http://jsfiddle.net/XZ4tM/1/
Fixing Your Example
The header styling has an issue, there are two colons ::
proceeding the z-index properties value.
.header{
width:960px;
background: #43484A;
height:80px;
position: fixed;
top:0;
z-index: 9999; /* Removed extra : here */
}
Fixed Example http://jsfiddle.net/kUW66/2/
这篇关于绝对位置的z索引比固定位置大的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!