ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

深入了解z-index层叠规则

2022-04-10 10:33:59  阅读:191  来源: 互联网

标签:index 顺序 层叠 元素 规则 inline 上下文


  • 什么是层叠规则
    层叠规则就是指当网页中的元素发生发生层叠时的表现规则
  • 怎么使用z-index属性
    z-index属性只有和定位元素(position不能为static的元素)在一起的时候才能使用,也可以时正数也可以是负数,数值越大,层级越高,但是随着css3的出现,z-index不仅只对定位元素有效,flex盒子的元素也有效
  • 什么是层叠水平
    层叠水平决定了同一个层叠上下文中元素在z轴上的显示顺序,所有的元素都有层叠水平,包括层叠上下文元素,也包括普通元素
  • 理解层叠顺序
  1. 位于最下面的background/border特指层叠上下文元素的边框和背景,每一个层叠顺序规则仅适用于当前层叠上下文的小世界
    2.inline水平盒子指的是包括inline/inline-block/inline-table元素得到层叠顺序,它们都是同等级的
    3、从层叠水平上来看,实际上z-index:0和z-index:auto是一样的
  • 层叠的准则
    1.水大谁上,如生效的z-index属性值,在同一层叠上下文领域,层叠只越大的哪个会覆盖层叠值小的那个
    2.后来居上,当元素的层叠水平一致、层叠顺序相同时,DOM流中处于后面的元素会覆盖前面的元素
  • z-index负值深入了解
    z-index负值元素层级是在层叠上下文元素上面的、block元素的下面,也就是z-index虽然名为负数层级,但依然无法突破当前层叠上下文所包裹的世界

标签:index,顺序,层叠,元素,规则,inline,上下文
来源: https://www.cnblogs.com/CHEN-JING-YANG/p/16124887.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有