div叠加

最新推荐文章于 2021-05-30 21:21:28 发布

AAyutainAA

最新推荐文章于 2021-05-30 21:21:28 发布

阅读量530

点赞数

分类专栏： css学习文章标签： css div 叠加

本文链接：https://blog.csdn.net/AAyutainAA/article/details/39184081

版权

css学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

div 叠加

重叠样式需要主要CSS样式解释
1、z-index 重叠顺序属性
2、position:relative和position:absolute设置对象属性为可定位（可重叠）
3、left right top bottom绝对定位具体位置设置

配合的样式
1、css width
2、css height
3、background 为了观察效果，我们对不同DIV设置不同背景颜色进行区别

接下来我们为大家奉上DIV按自己意愿重叠、叠加实例布局。我们新建4个DIV盒子，一个大的DIV盒子，CSS命名为“.div-relative”，三个小DIV盒子放于第一个大DIV对象盒子

内，DIV命名分别为“.div-a”、“.div-b”、“.div-c”。

  
  <!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div重叠 叠加实例 未排层叠顺序 www.divcss5.com</title> 
<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>

三、DIV重叠总结 - TOP

要实现DIV重叠，并改变实现DIV盒子层叠重叠顺序，我们对父级使用position:relative,对子级使用position:absolute、z-index（重叠顺序）、left，right，top，bottom绝对定位相当于父级具体位置。

AAyutainAA

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div叠加

div 叠加重叠样式需要主要CSS样式解释1、z-index 重叠顺序属性2、position:relative和position:absolute设置对象属性为可定位（可重叠）3、left right top bottom绝对定位具体位置设置配合的样式1、css width2、css height3、background 为了观察效果，我们对不同DIV设置不同
复制链接

扫一扫