Z-index属性

Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。


自然的层叠顺序


在一个HTML页面中,自然的层叠顺序(也就是元素在Z轴上的顺序)是由很多因素决定的。下面的是一个列表,它展示的列表项是处于一个层叠环境(stacking context,暂时未找到合适的汉语翻译,应该是指层叠的元素所处的那个层叠的环境)中,这些项是处于这个层叠环境的底部的。这个列表中的项都没有被赋予Z-index属性。


元素的背景和边框会创建一个stacking context


引用:

  • 具有负值的stacking contexts元素,按照出现的先后顺序排列(越靠后层级越靠上)
  • 没有被定位,没有浮动的块级元素,按照出现的先后顺序排列
  • 没有被定位,浮动的元素,按照出现的先后顺序排列
  • 内联元素,按照出现的先后顺序排列排列
  • 被定位的元素,按照出现的先后顺序排列

Z-index 属性,当被正确使用的时候,会改变自然的层叠顺序。


当然,除非元素已经被定位按照互相交叠的形式展现,否则元素的层叠顺序并不会特别的明显。下面的,负边距的BOX被拿来展示,用以说明自然的层叠顺序。


使Z-index并不是一个难以理解的属性,但它却会因错误的假设而使很多初级的开发人员陷入混乱。混乱发生的原因是因为Z-index只能工作在被明确定义了absolute,fixed或relative 这三个定位属性的元素中。


Git是什么?Git常用命令有哪些?
« 上一篇 2020年11月6日 上午12:00
CSS中的长度单位
下一篇 » 2020年11月6日 上午12:00