作为一个玩前端的,ps软件中的图层都知道吧,多个图层层叠就可以组成丰富多彩的图片,所以图层就有层叠顺序
了,Css的层叠原理也是差不多,只不过Css是通过多个盒子层叠形成丰富多彩的图片,Css层叠优先级设置不就是z-index
和!important
吗?是的,就是这两招,这两个Css属性应该是见怪不怪,因为这是我们只要写Css样式都会用到,那么它们有什么区别?
- z-index:
一个元素在文档中的层叠顺序
,用于确认元素在当前层叠上下文中的层叠级别。 - !important:
提升指定样式规则的应用优先权
,也可以理解为增加样式权重的方法,只要给元素属性值后面带上这个就会使当前设置的样式有最高优先级。
!important
这个相信不用我们多花时间去理解都知道,反正它就是最高优先级,但是z-index
的优先级相信很多人都是停留在它的值越高优先级越高,这样理解也没错,比如以下例子:
- z-index越小反而层叠优先级越高,效果跟上图一致,为什么?
.parent1 {...z-index: 2;}.parent2 {...z-index: 1;}
* 给设置了z-index
属性的盒子都添加了定位属性,为什么大小又生效了?<img src=“https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd845fc599d2479eb8f9ae310d7a1e9e~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)*z-index
大小对于元素的样式层叠优先级完全没有顺序可言,为什么会这样?<!DOCTYPE html><html lang="en"><head><style> .pa