css z-index属性

时间：5年前阅读：4921

一、z-index是什么

做过页面布局的同学对z-index属性应该是很熟悉了，z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。

在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。

position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。

2、z-index与定位元素

　　z-index只对定位元素（position）有作用。要设置非static的定位属性，z-index才会生效。static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。

　　如果定位元素z-index没有发生嵌套(并列的)：

直接上代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 300px;
				height: 100px;
				background: darkcyan;
			}
			#box2{
				width: 300px;
				height: 100px;
				background: darkolivegreen;
	/*相对定位*/
	/*position: relative;*/
	left: 100px;
	top: 50px;
	/*绝对定位*/
	position: absolute;
	left: 100px;
	top:50px;
	/*只有定位属性position才有层级z-index的概念*/
	/*可以决定当元素发生覆盖的时候,哪个元素在上面。通常一个较大的z-index值的元素会覆盖较低的那一个*/
	z-index: 6;
}


</style>

	</head>
	<body>
		<div id="box1">box1</div>
		<div id="box2">box2</div>
	</body>
</html>

相对定位：
	1、相对于它原来的位置进行位置变化，
	2、原来的位置还保留着

绝对定位：
	1、相对于离他最近的，有定位属性的父级元素进行定位
	2、它原来的位置不再保留

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css z-index属性

网友评论