CSSz-index层重叠序列的介绍
div层,跨层和其他HTML标签层重叠序列的风格特性,通常我们用的少,但也不可避免地会遇到CSS z-index使用。下一步,divcss5 z-index属性介绍基本的铺层顺序和设置对象重叠的顺序,从基本的语法应用案例教程,学习的特性。
一、语法和结构特性
Z指数和具体的数字
如:
{ 100 }:div的z-index
注:Z指数值不遵循单元。
Z指数数越高,和值必须是整数和正数(正整数)。
二、Z指数的使用条件
Z-index可以为了使用绝对定位的位置:绝对的性质。我们通常允许不同的对象框在不同的顺序重叠,我们希望z-index样式属性。
三、Z指数的应用案例
为了便于观察z-index样式属性,我们设置了3个div框,设置不同的CSS背景颜色,设置相同的CSS的CSS高度和宽度,设置背景颜色为黑色、红色和蓝色,respectively.css宽度100px,CSS高度50px
1。案例的CSS代码
CSS代码将内容复制到剪贴板。
实例属性 / * * /
位置:相对。divcss5 {;}
divcss5-1 divcss5-2。,。,。divcss5-3
{宽度:100px;身高:50px;位置:绝对的;}
。divcss5-1 { Z指数:10;背景:# 000;左:10px;顶部:10px }
。divcss5-2 { Z指数:20;背景:# F00;左:20px;顶部:20px }
。divcss5-3 { Z指数:15;背景:# 00f;左:30px;顶部:30px }
2,HTML代码片段
xml代码将内容复制到剪贴板。
3,增强案例截图
Z指数式的案例案例
案件表明:
三个盒子都使用绝对位置属性位置:绝对样式,并设置相同的高度和宽度样式。为了便于观察,我们使用左属性和右属性,并给出不同的值以使其错误。
divcss5-1框背景是黑色的,Z指数:10
的divcss5-2箱是红色的背景,Z指数:20
divcss5-3框背景是蓝色的,Z指数:15
为了看到第一箱特性:10、重叠的最低水平,而第二箱的特性:20具有最大的价值,所以最上面的一层重叠,和第三盒套Z指数:15,中心。
四、Z指数总结
我们使用的Z顺序式重叠。在实际的DIV+CSS布局,我们需要绝对的风格定位,我们可以用左、右定位,并实现不同层次的特性实现重叠顺序。