为什么我使用了z-index之后遮罩层依旧不能盖住文字

[laomokuyite]

为什么我使用z-index之后，遮罩层依旧在文字上面

[laomokuyite]

html部分内容:

css部分内容:
*
{
margin: 0px;
padding: 0px;
}

#out_div {
width: 890px;
height: 50px;
margin-left: 200px;
background: #F89400;
text-align: center;
}

#nav {
width: 820px;
height: 50px;
line-height: 40px;
position: absolute;
text-align: left;
}

#controllor {
position: absolute;
top:37px;
}


#controllor .controllor_ul {
position: absolute;
height: 50px;
width: 65px;
background:#FCB828;
margin-top: -38px;
margin-left: 73px;
z-index: 1;
}

#out_div ul li {
float: left;
list-style: none;
margin-left: 58px;
z-index: 2;
}

#out_div ul li a {
text-decoration: none;
padding: 12px 15px;
text-align: center;
color: #FCF0E0;;
}

[usecf]

我试过了 可以的

[冉娃娃]

麻烦你下次不要贴图片上来.直接copy代码不行么? 另外,copy代码的时候,加个引用吧.这样别人看起来会更舒服.. 当别人回答你的问题的时候,你肯定也更愿意看那种整洁的回复吧

[冉娃娃]

你在li上面设置的是z-index:2.在遮挡物上面设置的是z-index:1 你的想法是好的....但是行不通 首先.z-index只在定位元素上生效...所以在li上使用z-index本身就是错误的做法 直接设置遮挡div的z-index:-1.就可以解决你这个项目的问题 但根本问题还是要把原理搞懂哈.要不以后会踩很多坑的

[根子的数据库]

引用 3 楼 qq_25768813 的回复:

麻烦你下次不要贴图片上来.直接copy代码不行么? 另外,copy代码的时候,加个引用吧.这样别人看起来会更舒服.. 当别人回答你的问题的时候,你肯定也更愿意看那种整洁的回复吧

嗯 很对

[根子的数据库]

引用 4 楼 qq_25768813 的回复:

你在li上面设置的是z-index:2.在遮挡物上面设置的是z-index:1 你的想法是好的....但是行不通 首先.z-index只在定位元素上生效...所以在li上使用z-index本身就是错误的做法 直接设置遮挡div的z-index:-1.就可以解决你这个项目的问题 但根本问题还是要把原理搞懂哈.要不以后会踩很多坑的

嗯~ 非常对

[前端-珊珊]

首先说一下为什么z-index不生效。因为z-index是配合position：relative或者absolute实现的。所以你ul li里面的z-index设置压根不会生效。 其次，导航栏的效果不是这样做的，你要的是鼠标经过的时候实现的有个淡色的效果吧？

* {
				margin: 0px;
				padding: 0px;
			}
			
			#out_div {
				width: 890px;
				height: 50px;
				margin-left: 200px;
				background: #F89400;
				text-align: center;
			}
			
			#nav {
				width: 820px;
				height: 50px;
				line-height: 50px;
				position: absolute;
				text-align: left;
			}
			
			ul {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			
			ul>li {
				float: left;
				list-style: none;
				margin-left: 58px;
				width: auto;
				height: 100%;
				line-height: 50px;
				color: #000;
			}
			
			#nav ul>li a {
				display: block;
				width: 100%;
				height: 100%;
				text-decoration: none;
				text-align: center;
				color: #FCF0E0;
			}
			
			a:hover {
				background: #FCB828;
			}

<div id="out_div" style="margin-top: 10px;">
			<div id="nav">
				<ul>
					<li>
						<a href="#">网站首页</a>
					</li>
					<li>
						<a href="#">网站首页2</a>
					</li>
					<li>
						<a href="#">网站首页3</a>
					</li>
					<li>
						<a href="#">网站首页4</a>
					</li>
					<li>
						<a href="#">网站首页5</a>
					</li>
				</ul>
			</div>
		</div>

这个是根据你写的进行修改的。希望对你有帮助

[tomorrow93]

用这种方法做导航，很吃力

[qq_40891462]

上面的仁兄已经回答的很不错了，，另外定位有种技巧叫做子绝父相 子绝父绝不提倡 你至少给人家留一代吧 都搞绝了