从层叠上下文学习CSS，含示例

前端

2024-01-25 14:34:03

我们总在说，学习CSS，应该从箱子模型开始。其实，它应该从层叠上下文开始，只是这样对于初学者来说，似乎并不是一个友好的方式。

层的概念其实并不复杂。

当我们需要实现一个部分固定不动时，而其它部分跟随滚动条进行滚动，最简单的方法就是给他添加一个 position:fixed。

你一定会问，这个和层叠上下文有什么关系？

其实，position:fixed 就会形成一个新的层叠上下文，简单说，就是单独的一个“容器”，放着这个固定的元素。

好了，我们一个概念一个概念开始了解吧。

一、层叠上下文

层叠上下文（stacking context）是一个三维空间，它包含了所有页面元素。层叠上下文决定了元素在页面上的层叠顺序。

二、层叠顺序

层叠顺序（stacking order）是元素在层叠上下文中的顺序。层叠顺序决定了元素在页面上的显示顺序。

三、z-index

z-index属性可以用来设置元素的层叠顺序。z-index的值越大，元素的层叠顺序就越高。

四、层叠上下文创建

以下情况会创建一个新的层叠上下文：

根元素
定位元素（position:absolute、position:fixed、position:relative）
浮动元素
绝对定位元素
粘性定位元素

五、层叠上下文分离

层叠上下文分离（stacking context separation）是指在两个层叠上下文中，元素的层叠顺序是独立的。

六、z-index行为

在同一个层叠上下文中，z-index的值决定了元素的层叠顺序。但是，在不同的层叠上下文中，z-index的值没有影响。

七、示例

为了更好地理解层叠上下文，我们来看一个示例。

<html>
<head>
<style>
body {
  height: 100vh;
  width: 100vw;
  background-color: #f0f0f0;
}

.layer1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  z-index: 1;
}

.layer2 {
  position: relative;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #00ff00;
  z-index: 2;
}

.layer3 {
  position: fixed;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: #0000ff;
  z-index: 3;
}
</style>
</head>
<body>
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
</body>
</html>