css z

2021-01-20 08:21 jianzhan

DIV层、span层等html标识层重合次序款式z-index,平常大家应用较少,但也会免不了会碰到CSS z-index应用。接下来divcss5详细介绍z-index从基础特性到设定目标的堆叠次序、重合次序,从基本英语的语法到运用实例实例教程解读学习培训z-index。

1、z-index英语的语法与构造

z-index 跟实际数据

如:

div{z-index:100}

留意:z-index的标值不跟企业。

z-index的数据越高越靠前,而且值务必为整数金额和正数(正数的整数金额)。

2、z-index应用标准

Z-index在应用肯定精准定位 position:absolute特性标准下应用才可以应用。一般大家让不一样的目标盒子以不一样次序重合排序,大家便是要z-index款式特性。

3、z-index运用实例

以便便捷观查z-index款式特性,大家设定3个DIV盒子,各自设定不一样css情况色调,设定同样CSS高宽比、CSS宽度。各自设定情况色调为黑色、鲜红色、蓝色。CSS width为100px,css height为50px

1、实例css编码

CSS Code拷贝內容到剪贴板
  1. /* z-index案例 */    
  2. .divcss5{position:relative;}    
  3. .divcss5⑴,.divcss5⑵,.divcss5⑶    
  4. {width:100px;height:50px;position:absolute;}    
  5. .divcss5⑴{z-index:10;background:#000;left:10px;top:10px}    
  6. .divcss5⑵{z-index:20;background:#F00;left:20px;top:20px}    
  7. .divcss5⑶{z-index:15;background:#00F;left:30px;top:30px}   

2、html编码片断

XML/HTML Code拷贝內容到剪贴板
  1. <div class="divcss5⑴"></div>    
  2. <div class="divcss5⑵"></div>    
  3. <div class="divcss5⑶"></div>   

3、z-index实例截图


Z-index款式实践活动案例实例

实例表明:

3个盒子均都应用了肯定精准定位特性position:absolute款式,而且设定同样的高宽比和宽度款式。以便便于观查大家应用left、right特性并授予不一样值,让其参差有致。

Divcss5⑴盒子情况为黑色,z-index:10
Divcss5⑵盒子情况为鲜红色,z-index:20
Divcss5⑶盒子情况为蓝色,z-index:15

为能够看见第1个盒子z-index:10,因此重合在最下层,而第2个盒子z-index:20,值最大因此最顶层重合,第3个盒子设定z-index:15,垂直居中。

4、z-index总结

大家应用z-index重合次序款式,在具体DIV+CSS合理布局情况下大家必须肯定精准定位款式,而且可使用left、right开展精准定位,根据不一样z-index值完成层重合次序排序。