1.要想理解层叠上下层,首先要先从文档流和盒模型说起
文档流
在CSS中,文档流是一个很基础也是很重要的一个概念。很多时候她被称为Document Flow,但在CSS的标准被称为Normal Flow,即普通流或常规流。大家更喜欢称之为文档流。那么CSS的文档流是怎么一回事呢?
在HTML中任何一个元素其实就是一个对象,也是一个盒子。在默认情况下它是按照出现的先后顺序来排列,而这个排列的顺序就是文档流。
而页面中的文档流主要包括三部分:块、内联、内联块
流动方向inline元素从左到右,到达页面最右边才会换行
block元素从上到下,每一个都会另起一行
inline-block元素也是从左到右,但是但页面最右面的宽度不够存放一个inline-block元素的宽度,整个元素就会一起换行
宽度inline元素的宽度为内部inline元素的和,不能用width指定
block元素的宽度默认自动计算宽度,可以用width指定
inline-block元素的宽度为内部元素的和,可以用width指定
高度inline元素的高度是有line-height间接确定的,与height无关
block元素的高度有内部文档流元素决定,可以设置height
inline-block元素的高度与block类似
盒模型
在一个文档中,每一个元素都被抽象成一个盒子,每一个盒子又包括四部分(从内到外):内容(content),内填充(padding),边框(border),外边距(margin)。
1.我们一直都知道一个盒模型的background包括content和padding,那下面我们考虑一下,background的范围是从border的外边缘围成的区域还是从border的内边缘围成的区域呢?
代码验证:
JS Bindiv {
width: 200px;
height: 200px;
background: pink;
border: 10px solid rgba(255, 255, 255, 0.5);
}
效果图:
所以能看出background的范围是从border的外边缘围城的区域,也得出一个结论:border是在background上面。
2.下面我们试着想一下从右边看这个盒子是什么样的,谁在上面,谁在下面,下面我们代码验证一下
代码验证:
Document.parent {
width: 200px;
height: 200px;
border: 5px solid pink;
}
.child {
height: 20px;
background: skyblue;
margin-top: -14px; /* 将块级元素向上移动14px */
}
.float {
width: 50px;
height: 50px;
background: orange;
float: left;
margin-top: -20px; /* 将元素向上移动20px */
}
我是内联元素
显示效果:
结论:内联元素高于浮动元素高于块级元素
用图片可以直观的看出一个盒模型中元素的高低关系
3.下面我们加入定位试试看
代码验证:
Document.parent {
width: 200px;
height: 200px;
border: 5px solid pink;
}
.child {
height: 20px;
background: skyblue;
margin-top: -14px; /* 将块级元素向上移动14px */
}
.float {
width: 50px;
height: 50px;
background: orange;
float: left;
margin-top: -20px; /* 将元素向上移动20px */
}
.relative {
width: 50px;
height: 50px;
background: orangered;
position: relative; /* 将元素相对定位 */
left: 25px;
top: -20px;
}
我是内联元素
显示效果:
换绝对定位和固定定位效果同上,所以我们由得出一个结论:
除了静态定位(static),以上三种定位元素,都会处在其他元素之上。
4.最后验证一下定位元素加上z-index:
先正常排放,不用z-index
代码:
Documentdiv {
width: 300px;
height: 100px;
}
.relative {
background: pink;
position: relative;
}
.absolute {
background: skyblue;
position: absolute;
left: 40px;
top: 40px;
}
.fixed {
background: orange;
position: fixed;
left: 80px;
top: 80px;
}
显示效果:
当元素都加定位且没有z-index时,它们的层叠顺序是按照HTML中元素的顺序排列的,即后面的元素要比前面的元素高一点。
加上z-index
代码验证:
Documentdiv {
width: 300px;
height: 100px;
}
.relative {
background: pink;
position: relative;
z-index: 3;
}
.absolute {
background: skyblue;
position: absolute;
left: 40px;
top: 40px;
z-index: 2;
}
.fixed {
background: orange;
position: fixed;
left: 80px;
top: 80px;
z-index: 1;
}
显示效果:相对定位元素(pink)z-index为3,绝对定位元素(skyblue)z-index为2,固定定位元素(orange)z-index为1
所以当设置了 z-index 属性之后,这三种定位为元素的高低就根据 z-index 的值变化,值越大,层级越高,越靠上。
5.上面已知定位元素高于文档中其他元素,那定位元素加上-z-index与文档中元素相比呢?
代码验证:
Document.parent {
width: 200px;
height: 200px;
border: 10px solid pink;
background: #ccc;
}
.child {
width: 100px;
height: 100px;
background: skyblue;
position: relative;
left: 150px;
top: 150px;
z-index: -1; /* 将z-index设置为-1 */
}
显示效果:
所以设置了z-index值为负数的定位元素,会处于块级元素之下。
2.所以这就是所说的层叠上下文
简单来说,就是比谁层级高,比谁父元素层级高
元素盒子放入层叠顺序上下文的顺序,从层叠的底部开始,共有七种层叠等级:背景和边框:形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。
负z-index值:层叠上下文内有着负z-index值的子元素。
块级盒:文档流中非行内非定位子元素。
浮动盒:非定位浮动元素。
行内盒:文档流中行内级别非定位子元素。
z-index: 0:定位元素。 这些元素形成了新的层叠上下文。
正z-index值:定位元素。 层叠上下文中的最高等级。
文档根元素()就是一个默认的层叠上下层
每一个层叠上下层就是一个小世界,只有在同一个小世界的z-index才可以相互比较。
文档中的层叠上下文由满足以下任意一个条件的元素形成:文档根元素();
absolute(绝对定位)或 relative(相对定位)且 auto 的元素;
fixed(固定定位)或 sticky(粘滞定位)的元素(沾滞定位适配所有移动设备上的浏览器,但老的桌面浏览器不支持);
flex (auto;
grid (auto;
1 的元素;
以下任意属性值不为 none 的元素:层叠上下文developer.mozilla.org
负的z-index也在层叠上下层的小世界里,不会逃出这个小世界。
总结
对于学习CSS来说,阅读CSS的规范和理解相关的概念都是枯燥无味的。而且CSS不正交,当你改变其中一个属性时,另一个属性也会变化。所以理解一些概念会比较吃力。比如这篇文章中提到的相关概念: 文档流(Normal Flow)、、层叠上下文(Stacking Context)、层叠水平(Stacking Level) 和 层叠顺序(Stacking Order)。
虽然这些概念是CSS的基础,但很多同学都一直不愿去触碰,因为它们看起来简单,事实上还是较为复杂的。如查我们花一定的时间理解了这些概念,能帮助我们更好的理解CSS中其他相关的概念和知识点,特别是z-index的运用。