CSS z-index的用法

2018-06-24 01:46:13来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

理清 position及z-index的用法:

static :  无特殊定位,对象遵循HTML定位规则
absolute :  将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框
relative :  对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,

 

z-index:其实从字面上已经可以解释;z是从x、y以后的第三个轴,从网页上表现就是除了上下左右外的前后。
规定这个属性,首先要求Div必须是浮动的,z值越大,Div越靠前;数值可以不连续。

 

例如

<div style="z-index:1000;background:red;color:white;width:200px;height:200px;">图层1</div>
<div style="z-index:100;background:yellow;color:blue;width:200px;height:200px;position:absolute;left:70px;top:120px;">图层2</div>
<div style="z-index:10;background:green;color:white;width:200px;height:200px;position:relative; left:30px;top:-150px;">图层3</div>

 CSS <wbr>z-index的用法

 

理论上图层1的z-index值设最大,应该排在最上面,由于它没有设浮动,遵循HTML定位规则

为什么图层3的top设负值呢?因为position:relative不能层叠,它应该是在图层1的下方,如果要它上去一点。只能设负值。而图层2设position:absolute浮动效果,它可以任意摆放,不受其它div影响,完全根据html页面定位

CSS样式表中Z-index属性使用的注意事项:
      1、Z-index对定位层叠元素有效(如position:relative);
      2、Z-index只可比较同级元素。这也许是大家很容易忽视的问题,我就卡在了这里。也就是说,Z-index只能对同级元素进行分层展示;
      3、Z-index的作用域:假设A和B两个元素都设置了定位(相对定位、绝对定位、一个相对一个绝对定位都可以),且是同级元素,样式为:

.boxA{z-index:4}

.boxB{z-index:5}
于是,不难看出,元素B的层级要高于元素A,在此需要指出的是,A元素下面的子元素的层级也同样都低于B元素里的子元素,即使你将A元素里的子元素设为z-index:9999;同理元素B里的子元素,即使是设的z-index:1它照样比元素A的层级要高;
4、这个属性不会作用于窗口控件,如selected对象。

层级关系的比较:

1.对于同级元素, 默认 (或 position:static) 情况下文档流后面的元素会覆盖前面的.
2.对于同级元素, position 不为 static 且 z-index 存在的情况下 z-index 大的元素会覆盖 z-index 小的元素, 即 z-index 越大优先级越高.
3.IE6/7 下 position 不为 static, 且 z-index 不存在时 z-index 为 0, 除此之外的浏览器 z-index 为 auto.
4.z-index 为 auto 的元素不参与层级关系的比较, 由向上遍历至此且 z-index 不为 auto 的元素来参与比较.

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS的position属性:relative和absolute

下一篇:清除浮动的几种方式