1. 什么是 CSS 图层?
CSS 图层是将网页上的元素像普通纸张一样分成层，比如背景、文字、图片等，这样有助于元素之间实现高效的组织和定位。每一个元素都可以单独成一个层，同时可以通过 CSS 控制图层的显示和隐藏，以及定位和堆叠顺序等属性。
通过使用 CSS 图层，我们可以更加方便地实现多种复杂的交互效果和布局效果，比如页面的拖拽、视差效果、弹出层等。本文将重点介绍如何使用 CSS 创建图层，以及如何控制各个图层的堆叠顺序和定位。
2. 如何创建 CSS 图层？
在 CSS 中创建图层其实是通过一个叫做“position”的属性来实现的。常见的 position 属性值有以下几种：
static：元素的位置不受影响，会按照文档流的方式排列。
relative：元素相对于自己原来的位置进行移动。
absolute：元素相对于最近的非 static 父元素进行移动。
fixed：元素相对于浏览器窗口进行移动，并会随着页面滚动而保持位置不变。
我们可以通过设置不同的 position 属性值，将元素移动到不同的图层中。下面我们通过实例来演示如何创建 CSS 图层。
2.1. 代码实例
先创建一个 HTML 文件：
<html>
<head>
<title>CSS 图层</title>
<style>
/* 创建第一个图层 */
.layer-1 {
position: relative;
z-index: 10;
background-color: #f8f8f8;
width: 300px;
height: 200px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #ddd;
}
/* 创建第二个图层 */
.layer-2 {
position: absolute;
top: 50px;
left: 50px;
z-index: 9;
background-color: #fff;
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="layer-1">
<p>这是第一个图层</p>
<div class="layer-2">
<p>这是第二个图层</p>
</div>
</div>
</body>
</html>
上面的代码中，我们创建了两个图层，分别是 layer-1 和 layer-2。其中，layer-1 是一个相对定位的元素，而 layer-2 是一个绝对定位的元素。我们通过设置 z-index 属性来控制它们的堆叠顺序，其中 z-index 值越大的图层会显示在 z-index 值较小的图层上面。
2.2. 效果演示
运行上面代码，我们可以看到如下效果：
3. 如何控制图层的定位和堆叠顺序？
在上一节中，我们演示了如何创建多个 CSS 图层，接下来我们将介绍如何控制这些图层的位置和堆叠顺序。
3.1. 控制图层的定位
我们已经知道，通过设置 position 属性可以控制元素在网页上的定位方式。在 CSS 图层中，它同样适用。我们可以通过设置不同的 position 属性值，将元素移动到不同的图层中。
除了 position 属性，还有一些其他的属性也可以用来控制图层的定位，比如 top、left、right、bottom、width、height 等。这些属性可以帮助我们精确地控制图层的位置和大小。
3.2. 控制图层的堆叠顺序
在同一张网页中，可能会有多个图层重叠在一起。此时，我们需要通过设置 z-index 属性来控制它们的堆叠顺序，以决定哪一个图层应该在最上面显示。
z-index 属性接受一个整数值，值越大的图层会覆盖值较小的图层。如果两个图层的 z-index 值相等，则后面的那个会覆盖前面的那个。
需要注意的是，z-index 属性只有在元素的 position 属性值不是 static 时才会生效。另外，要保证 z-index 属性值的唯一性，避免出现两个图层的 z-index 值相等的情况。
4. 如何创建复杂的 CSS 布局？
CSS 图层可以帮助我们创建各种复杂的交互效果和布局效果，下面我们来介绍几个常见的例子。
4.1. 创建滑动菜单
滑动菜单是一种常见的导航方式，我们可以通过 CSS 图层来创建。具体步骤如下：
创建容器元素，并设置 overflow 属性为 hidden，这样可以将中间部分的菜单隐藏起来。
创建两个菜单元素（左菜单和右菜单），并设置它们的宽度。
通过设置 left 和 right 属性，将左菜单和右菜单分别移动到容器左侧和右侧，隐藏起来。
创建一个触发器元素，并设置点击事件。点击触发器元素时，通过设置 left 和 right 属性，将左菜单和右菜单移动到中间位置，显示出来。
4.2. 创建折叠面板
折叠面板可以帮助我们在有限的空间内实现更多的内容。我们可以通过 CSS 图层来创建折叠面板，具体步骤如下：
创建容器元素，并设置 overflow 属性为 hidden，这样可以将内容收起来。
创建标题元素，并设置点击事件。点击标题时，通过设置 height 属性，将容器元素展开或收起来。
创建内容元素，并设置初始高度为 0。当容器展开时，通过设置 height 属性，将内容元素高度逐渐变为实际高度。
4.3. 创建轮播图
轮播图是一种常见的展示方式，我们可以通过 CSS 图层来创建。具体步骤如下：
创建容器元素，并设置 overflow 属性为 hidden，这样可以裁剪掉容器外部的内容。
创建多个图片元素，并设置它们的定位和 z-index 属性，将它们沿着左右方向排列到容器的两侧。
创建一个触发器元素，并设置点击事件。点击触发器元素时，通过设置 left 和 right 属性，将图片元素从一侧滑动到另一侧，实现轮播效果。
以上就是几个通过 CSS 图层来实现的复杂布局效果。在实际开发中，我们可以根据需要进行创新，将图层效果运用到各种场景中。