z-index属性

CSS 快速掌握 admin 523浏览
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				position: absolute;
			}
			.div1{
				background-color: #f00;
				left: 100px;
				top: 100px;
				z-index:2;
			}
			.div2{
				background-color: #0f0;
				left: 200px;
				top: 200px;
				z-index:1;
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
		<div class="div2"></div>
	</body>
</html>

z-index结论:

●只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有z-index;

●z-index的值是没有单位的,值是一个正整数,默认的z-index的值是0;

●如果多个定位元素没有设置z-index属性或者z-index值设置一样那么写在HTML后面的定位元素就会压盖住前面的定位元素

●z-index表示谁压盖着谁,数值大的会压盖住数值小的,只有定位的元素才有z-index值;

●在使用固定定位来实现顶部导航栏添加.nav{z-index:999999999}

转载请注明:大灰牛博客 » z-index属性