您现在的位置是：网站首页>前端技术>css篇：z-index层重叠顺序前端技术

css篇：z-index层重叠顺序

admin【前端技术】7人已围观

	z-index 跟具体数字 

	如： 

	div{z-index:100} 

	注意：z-index的数值不跟单位。 

	z-index的数字越高越靠前，并且值必须为整数和正数（正数的整数）。 

	案例说明： 

	三个盒子均都使用了绝对定位属性position:absolute样式，并且设置相同的高度和宽度样式。为了便于观察我们使用left、right属性并赋予不同值，让其错落有致。 

	Divcss5-1盒子背景为黑色，z-index:10 

	Divcss5-2盒子背景为红色，z-index:20 

	Divcss5-3盒子背景为蓝色，z-index:15 

	为可以看见第一个盒子z-index:10，所以重叠在最下层，而第二个盒子z-index:20，值最大所以最上层重叠，第三个盒子设置z-index:15，居中。 