z-index
2018-01-18 本文已影响0人
戴西西的染坊
-
平面图形x轴、y轴,三维有z轴,盒模型处于三维时自然也有三维,故此z-index就是z轴坐标,值越大,“离你越近”,有z轴自然需要“脱离文档流”了。
问题:
- z-index 在什么情况下才生效?
- 只有在元素的position属性的值不为static生效,flex盒子也可以设置此属性
- z-index值越大元素越靠前,对吗?
- z-index大的会覆盖值小的。但是若父元素z-index使用了数字的值将会创建一个层叠上下文,那么此时子元素只会与父元素内的子元素进行z-index比较,不与外部元素比较。
- z-index 不设置和设置为0有什么区别?
- 有区别,不设置默认为auto不会创建层叠上下文。
- z-index 可以为负值吗?
- 可以为负值,降低z轴的值,可以理解为“远离”
- z-index 在设置元素覆盖时到底有什么规律?
- 同级元素z轴值大,覆盖值低的
- z-index值相同,html结构靠后的覆盖前面的
- 创建了层叠上下文的父元素内的子元素互相比较