z-index的使用与层级不生效问题

3,023 阅读1分钟

该属性设置一个定位元素沿 z 轴的位置,z轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

!!!注意: 以下属性未设置好,层级会出现不生效的情况

  1. z-index 仅能在定位元素上奏效,即该元素不是默认的position:static,需要设置 position:absolute | relative | fixed;
  2. 子元素的层级建立在父元素层级的基础上.即子元素无论设置了多大的层级,其父元素的层级如果较小,在父元素外该子元素的层级也会小,如果父元素被盖住了,该子元素也会被盖住
  3. 无序列表ul和有序列表ol默认有层级(坑:控制台不显示),如果需要提高其内部的层级,可以给ul或li添加大些的层级,如果其内部某个元素的层级需要比ul/ol外层的还要高但不能提高整个ul的层级,这种情况建议换个结构(如div)