css怎样让div重叠？

css怎样让div重叠？下面本篇文章给大家介绍一下使用CSS让DIV重叠并按想要顺序重叠的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

css怎样让div重叠？

在css中，想让DIV重叠，甚至按想要顺序重叠，主要使用position属性和z-index属性，通过绝对定位来实现。

重叠样式需要主要CSS样式解释

1、z-index 重叠顺序属性

2、position:relative和position:absolute设置对象属性为可定位（可重叠）

3、left、right、top、bottom绝对定位具体位置设置

配合的样式

1、css width

2、css height

3、background 为了观察效果，我们对不同DIV设置不同背景颜色进行区别

示例1：未排层叠顺序

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<style> 
.div-relative{
   position:relative;
  color:#000;
  border:1px solid #000;
  width:500px;
  height:400px;
} 
.div-a{
 position:absolute;
 left:30px;
 top:30px;
 background:#F00;
 width:200px;
 height:100px;
} 
/* css注释说明： 背景为红色 */ 
.div-b{
 position:absolute;
 left:50px;
 top:60px;
 background:#FF0;
 width:400px;
 height:200px;
} 
/* 背景为黄色 */ 
.div-c{
 position:absolute;
 left:80px;
 top:80px;
 background:#00F;
 width:300px;
 height:300px;
} 
/* DIV背景颜色为蓝色 */ 
</style> 
</head> 
<body> 
<div class="div-relative"> 
<div class="div-a">我背景为红色</div> 
<div class="div-b">我背景为黄色</div> 
<div class="div-c">我背景为蓝色</div> 
</div> 
</body> 
</html>

效果图：

说明：

我们使用position实现绝对定位，对父级设置position:relative属性，对其子级设置position:absolute加上left或right和top或bottom实现子级在父级内任意定位。在原始情况下重叠是按DIV代码本身顺序排列，越后输入的DIV盒子其越靠前（浮在上面）。除了改变源代码本身div代码在html顺序，我们还可以使用css z-index实现DIV层排列顺序。

示例2：控制DIV重叠顺序

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<style> 
.div-relative{
 position:relative;
 color:#000;
 border:1px solid #000;
 width:500px;
 height:400px;
} 
.div-a{
 position:absolute;
 left:30px;
 top:30px;
 z-index:100;
 background:#F00;
 width:200px;
 height:100px;
} 
/* div背景色为红色 */ 
.div-b{
 position:absolute;
 left:50px;
 top:60px;
 z-index:80;
 background:#FF0;
 width:400px;
 height:200px;
} 
/* 背景为黄色 */ 
.div-c{
 position:absolute;
 left:80px;
 top:80px;
 z-index:70;
 background:#00F;
 width:300px;
 height:300px;
} 
/* 背景为蓝色 */ 
</style> 
</head> 
<body> 
<div class="div-relative"> 
<div class="div-a">我背景为红色</div> 
<div class="div-b">我背景为黄色</div> 
<div class="div-c">我背景为蓝色</div> 
</div> 
</body> 
</html>

效果图：