一、CSS盒模型基础

首先，我们需要了解CSS盒模型的基本概念。CSS盒模型是由四个部分组成的：内容（Content）、内边距（Padding）、边框（Border）和外部边距（Margin）。

  1. 内容（Content）：盒子的实际内容，如文本或图片。
  2. 内边距（Padding）：盒子内容与边框之间的空间。
  3. 边框（Border）：盒子周围的线条。
  4. 外部边距（Margin）：盒子与周围元素之间的空间。

每个盒子都有其自己的盒模型，且默认情况下，盒子的内容、内边距、边框和外部边距都是可见的。

二、CSS层叠规则

在多个盒子叠加时，CSS层叠规则决定了盒子的显示顺序。以下是一些基本的层叠规则：

  1. 层叠上下文：层叠上下文是由文档流、定位元素、浮动元素和根元素等组成的。在层叠上下文中，元素的层叠顺序是由其z-index属性决定的。
  2. z-index属性：z-index属性用于控制元素的层叠顺序。当两个元素在同一层叠上下文中时，z-index值较大的元素会显示在z-index值较小的元素之上。
  3. 层叠上下文规则：当两个元素在同一层叠上下文中时，z-index值并不是唯一决定层叠顺序的因素。还需要考虑以下规则：
    • 普通流中的元素会按照其文档流顺序进行层叠。
    • 定位元素会根据其定位方式（绝对定位、相对定位等）进行层叠。
    • 浮动元素会根据其浮动方向（水平或垂直）进行层叠。

三、图片层叠示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片层叠示例</title>
<style>
  .box {
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
  }
  .box img {
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 1;
  }
  .box img:nth-child(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
</style>
</head>
<body>
<div class="box">
  <img src="image1.jpg" alt="图片1">
  <img src="image2.jpg" alt="图片2">
</div>
</body>
</html>

四、总结