css怎样让div重叠?

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

css怎样让div重叠?

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

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

1、z-index 重叠顺序属性

2、position:relativeposition:absolute设置对象属性为可定位(可重叠)

3、leftrighttopbottom绝对定位具体位置设置

配合的样式

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>

效果图:

1.png

说明:

我们使用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>

效果图:

2.png

z-index的值为正整数值,数字越大对应对象层越浮上层(越靠前)。

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css怎样让div重叠?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏