盒子模型定位属性（position、z-index等）

      在CSS中，盒子模型的定位属性涉及到几个关键的属性，包括position, top, right, bottom, left和z-index。这些属性共同决定了元素在页面中的位置。下面是对这些属性的详细代码解析：

1. position属性：

   这个属性定义了一个元素的定位类型。它可以取以下几个值：

   static：默认值，元素按照正常的文档流进行布局。

   relative：元素相对于其正常位置进行偏移。

   absolute：元素相对于其最近的非static定位的祖先元素进行定位。

   fixed：元素相对于浏览器窗口进行定位，即使页面滚动也不会移动。

   例子：

   .box {

     position: relative; /* 或者 absolute, fixed, sticky */

   }

2. top, right, bottom, left属性：

这些属性用来设置定位元素在特定轴上的偏移量。它们可以用来微调元素的位置。只有当元素的position属性被设置为relative, absolute, fixed时，这些偏移属性才有意义。

   例子：

   .box {

     position: absolute;

     top: 10px; /* 在垂直轴上向上偏移10px */

     right: 20px; /* 在水平轴上向右偏移20px */

     bottom: 30px; /* 在垂直轴上向下偏移30px */

     left: 40px; /* 在水平轴上向左偏移40px */

   }

3. z-index属性：

这个属性用于确定定位元素的堆叠顺序。数值越大，元素越靠上。

   例子：

   .box1 {

     position: absolute;

     top: 10px;

     left: 10px;

     z-index: 2;

   }

   .box2 {

     position: absolute;

     top: 50px;

     left: 50px;

     z-index: 1;

   }

在这个例子中，.box2会覆盖.box1，因为它的z-index值更高。如图所示：