admin管理员组

文章数量:1611532

1、position设置元素的定位方式

 left right top bottom

相当于坐标点和参考点的关系

1、默认值为static 静态
2、relative 相对定位 相对于自己的位置偏移
3、absolute 绝对定位 相对于非static最近的父级元素 一般来说是relative的
4、fixed 固定定位 一般相对于视窗

2、z-index（只对设置了position的元素起作用）
只要设置了position属性 他的层级就高于没有设置position的层级

层级顺序
默认HTML结构顺序
position（非static值） 元素高于其他元素
position（非static值） 元素之间先通过z-index值判断
如果z-index相同按照HTML结构顺序

z-index属性
auto（默认值）和整数
auto相当于0
3、层叠上下文的元素条件

（1）根元素HTML
（2）z-index值部位auto的绝对/相对定位
（3）一个z-index值部位auto的flex项目（flex item） 即父元素 display：flex/inline-flex
（4）opacity属性值小于1的元素
（5）transform属性值不为 none 的元素
（6）mix-blend-mode的属性值不为normal
（7）filter的值不为none
（8）perspective的值部位none
（9）isolation的属性被设置为isolate的元素
（10）position：fixed
（11）在 will-change 中制定了任意的css属性，即使你没有直接指定这些属性的值
（12）-webkit-overflow-scrolling属性被设置touch的元素

本文标签： 层级元素Position

版权声明：本文标题：position+元素层级 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1728605571a1165406.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。