z-index 元素顺序 - 后宫甄嬛

原创 uptown 随笔 Css 128阅读 2018-08-25 12:12:29 举报

先提 3 个小问题:
1、position 和 z-index 的默认属性是什么?

希望你答对了!答案:position:static,z-index :auto

剩下的两个问题:

2、position 所有属性值,是否支持 z-index ?

3、元素设置不同 position 属性值,重叠在一起,如何让其中任意一个在最上层?

带着这些问题,今天,来挖一下 position 和 z-index 的一些‘私情’!

本文,将对多个元素进行对别,分别带不同 position 值,加与不加 z-index,进行测试!

1、不加z-index情况:

· inherit 和 static 的元素,不管div位置,都屈于最底层,两者正常的文档流,谁div靠后,z-index更上层。
· 其他元素后来居上:absolute、 fixed、relative

但出现这种情况:虽然由于前后关系,static 在 inherit 上层,但  inherit  的文字和static 重合了。

个人理解,是由于  inherit 继承 body 的 static自动忽略 top, bottom, left, right 或者 z-index 声明,两者同级。

2、加 z-index:

结果:层级由下到上:block4 > block5 > block3 > block2 > block1
· 由于block4 的 position:inherit ,即继承父元素的static,static会忽略z-index 声明;根据div顺序:block4 > block5
· 而fixed、absolute、relative 应用 z-index 声明,根据z-index值,由小到大而依次层叠:block3 > block2 > block1

设想一下,父元素设置为 position: relative; 子元素排列顺序?

结果:层级由下到上:block5 > block4 > block3 > block2 > block1

· 因为 block4 继承父元素的relative,z-index 有效

3、最后,来总结一下 position 、 z-index

类似成,后宫女性的地位,z-index 代表嫔妃受宠程度。
· static 默认是出生平凡的宫女,永远处于后宫食物链最底层。翻牌子的托盘只有嫔妃的名字,宫女毫无受宠(z-index)可能 。
· inherit 继承父元素,看她的父亲是否达官贵族(fixed、absolute、relative),否则她也是宫女。
· fixed、absolute、relative 各类嫔妃,永远凌驾在宫女之上,受宠程度高低(z-index)决定各自地位。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复