DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加

下面我就来详细讲解一下“DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加”的完整攻略。

概述

在网页设计中，经常会遇到需要将多个DIV重叠在一起的场景，这样可以实现一些特殊的效果。针对这种需求，我们可以通过CSS样式来实现DIV层叠效果。

方法1：使用z-index属性

z-index 属性指定元素的层叠顺序，数值越大越靠前，即越靠近用户。一般情况下，如果两个DIV重叠在一起，我们可以通过设置它们各自的z-index值来决定它们的叠放顺序。

示例1：

<style>
 div{
   position: absolute;
   width: 100px;
   height: 100px;
 }
 .box1{
   background-color: yellow;
   left: 50px;
   top: 50px;
   z-index: 2;
 }
 .box2{
   background-color:red;
   left: 100px;
   top: 100px;
   z-index:1;
 }
</style>

<div class="box1"></div>
<div class="box2"></div>

以上代码中，我们创建了两个DIV（box1和box2），并设置它们的宽度和高度都是100px，box1的背景色是黄色，box2的背景色是红色，我们给它们的位置设置了 left 和 top 属性，将box1放在了box2上层，并通过给box1设置比box2更大的 z-index 值，让box1位于box2之上。

示例2：

<style>
 div{
   position: relative;
   width: 100px;
   height: 100px;
 }
 .box1{
   background-color: yellow;
   margin-bottom: -50px;
   z-index: 2;
 }
 .box2{
   background-color:red;
   margin-left: 50px;
   z-index:1;
 }
</style>

<div class="box1"></div>
<div class="box2"></div>

在以上代码中，我们将两个DIV的 position 属性设置为 relative，这样它们的相对位置才能起作用。box1和box2垂直方向上有一定的重叠，我们通过设置 box1 的 margin-bottom: -50px 将其向上移动，让它和box2重叠部分的位置正好重合，然后给 box1 更大的 z-index 值，让它显示在box2上层。

方法2：使用伪元素

除了设置 z-index 属性以外，还可以通过使用伪元素（:before 或者 :after）来实现DIV层叠效果。

示例3：

<style>
 div{
   position: relative;
   width: 100px;
   height: 100px;
 }
 .box1{
   background-color: yellow;
   z-index: 2;
 }
 .box2{
   background-color:red;
   position: relative;
   z-index:1;
 }
 .box2:after{
   content: "";
   display: block;
   position: absolute;
   left: 50px;
   top: 50px;
   width: 50px;
   height: 50px;
   background-color: red;
   z-index: -1;
 }
</style>

<div class="box1"></div>
<div class="box2"></div>

以上代码中，我们将两个DIV的 position 属性设置为 relative，并给 box1 更大的 z-index 值，让它显示在box2上层。然后，我们通过给 box2 设置一个伪元素（:after），并设置其 display 属性为 block，让它在原来的位置上覆盖一层相同大小的红色块。将伪元素的 z-index 值设为-1，让它显示在所有元素的最底层，从而产生重叠效果。

以上就是我对“DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加”的完整攻略说明，希望对您有所帮助。