css中的层如何使用

在CSS中，层（Layer）的概念通常与z-index属性相关，用于控制页面上元素的堆叠顺序。当你在页面上有多个重叠的元素时，z-index属性决定了哪个元素在上面，哪个元素在下面。

基础概念

层叠上下文（Stacking Context）：这是一个三维的概念，每个元素都可以看作是三维空间中的一个层叠上下文。元素的层叠顺序由其z-index值决定。
z-index：这是一个整数值，用于指定元素的堆叠顺序。具有更高z-index值的元素会覆盖具有较低z-index值的元素。

类型

固定层（Fixed Layer）：使用position: fixed;创建的层，相对于浏览器窗口定位。
绝对层（Absolute Layer）：使用position: absolute;创建的层，相对于最近的非static定位的祖先元素定位。
相对层（Relative Layer）：使用position: relative;创建的层，相对于其正常位置定位。

应用场景

弹出框：通常使用绝对定位和较高的z-index值来确保弹出框显示在其他元素之上。
导航栏：使用相对定位和适当的z-index值来确保导航栏始终在页面顶部。
浮动元素：在创建浮动元素（如工具提示）时，使用z-index来控制它们的堆叠顺序。

遇到的问题及解决方法

问题：为什么设置了`z-index`，元素仍然没有按预期堆叠？

原因：可能是由于元素没有创建新的层叠上下文，或者父元素的z-index值影响了子元素的堆叠顺序。
解决方法：
- 确保父元素没有设置z-index值，或者父元素的z-index值不会影响子元素。
- 确保设置了position属性（除了static以外的值），因为只有设置了非static的position属性，z-index才会生效。
- 确保没有其他CSS规则覆盖了你设置的z-index值。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Layer Example</title>
<style>
  .container {
    position: relative;
  }
  .box1, .box2 {
    position: absolute;
    width: 100px;
    height: 100px;
  }
  .box1 {
    background-color: red;
    z-index: 1;
  }
  .box2 {
    background-color: blue;
    z-index: 2;
  }
</style>
</head>
<body>
<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>
</body>
</html>

在这个示例中，.box2将会显示在.box1之上，因为它的z-index值更高。