div重叠CSS允许div重叠两个div或多个div序列重叠。

本文主要介绍了让div按需要重叠和重叠，需要实现CSS，即实现CSS绝对定位。朋友需要参考。

允许div按需要重叠和重叠，需要CSS来实现，也就是说，CSS的绝对定位是实现的。

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

1、Z指数重叠顺序的属性
2、位置：位置：绝对相对，并设置对象属性是locable（重叠）
3、左、右、下、下、绝对位置、特定位置设置

匹配方式

1，CSS宽度
2，CSS高度
3、背景为了观察效果，我们区分不同背景颜色的不同div

然后我们躺下来，把我们所有的例子布局在DIV.建立4个新的div框，一个大的DIV CSS盒子，名叫。div relative，和第一大div对象箱三小div框，div的名字是a。div，div，a，X。，分别。

无序的、行顺序的div重叠实例

1。完整的HTML源代码如下所示：
xml代码将内容复制到剪贴板。

拆散的序列的div重叠叠加的实例

相对位置：相对。div {；颜色：# 000；边框1px solid # 000；宽度：500px；身高：400px }
。div-a {位置：绝对；左：30px；顶部：30px；背景：# F00；宽度：200px；身高：100px }
注：CSS /红色背景。
。div-b {位置：绝对；左：50px；顶部：60px；背景：# ff0；宽度：400px；身高：200px }
黄色背景
。div-c {位置：绝对；左：80px；顶部：80px；背景：# 00f；宽度：300px；身高：300px }
背景色是蓝色的。

我的背景是红色的。
我的背景是黄色的。
我的背景是蓝色的。

2，层叠层叠序列的CSS实例
示例说明：

我们使用位置来实现绝对定位，设置位置：在母公司层面相对属性，设置位置：绝对对孩子的水平，加上左、右、顶部或底部，并实施分层次在父级的定位，在原来的情况下，重叠置于div代码本身秩序，和更后来的div框输入（浮在上面）。除了改变在HTML命令的源代码本身的div代码，我们也可以使用CSS z-index实现div层阶。

二、通过CSS控制div重叠序列

我们利用上述绝对定位的实例代码，只需要。div a，b。div，and.div-cz-index样式可以以任何顺序。

扩展知识：

Z指数的值是一个正整数，且数量较大，更多的浮动对象层上层。

上述实例的默认顺序是。DIV C浮在上面的一层（蓝色背景层），。div b浮在中间水平（黄色背景层），。div a底排（红色背景层），然后用z-index风格实现颠覆秩序，不改变HTML代码的情况下，。div b浮在中间（黄色背景）排名不变，实现；。div a浮在上面（红色背景），Div c底排（蓝色背景）。

1。按照意愿排列div重叠序列完整的HTML代码。
xml代码将内容复制到剪贴板。

重叠重叠序列序列

相对位置：相对。div {；颜色：# 000；边框1px solid # 000；宽度：500px；身高：400px }
。div-a {位置：绝对；左：30px；顶部：30px；Z指数：100；背景：# F00；宽度：200px；身高：100px }
背景颜色为红色*
。div-b {位置：绝对；左：50px；顶部：60px；Z指数：80；背景：# ff0；宽度：400px；身高：200px }
黄色背景
。div-c {位置：绝对；左：80px；顶部：80px；Z指数：70；背景：# 00f；宽度：300px；身高：300px }
蓝色背景

我的背景是红色的。
我的背景是黄色的。
我的背景是蓝色的。

2，div级联序列实例截图
实现了红色背景的div a和蓝色背景div C依次堆叠代替实例截图

我们不改变HTML代码，第一个实例div a，div b，div C在绝对定位，可以添加到实现堆叠顺序变化。

三，div重叠汇总

实现div重叠和改变div盒堆叠顺序，我们使用位置：相对于父级，和使用位置：绝对的，Z指数（重叠的顺序），左，右，顶部和底部的绝对定位的父级，这相当于父母的具体位置。

本文中的两个演示下载