DIV重叠 CSS让DIV层叠、叠加,CSS让两个DIV或多个DIV按顺序重叠叠加篇
让DIV重叠并按想要顺序重叠需要CSS来实现,即CSS绝对定位进行实现。
配合的样式
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”。
一、未排序、为排顺序DIV层叠重叠实例 - TOP
1、完整HTML源代码如下:
html>
div重叠 叠加实例 未排层叠顺序 www.divcss5.com.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背景颜色为蓝色 */
我背景为红色