html5两个标签重叠,css中两个盒子如何重叠？

如果想要实现两个盒子重叠，并且要让它们按照我们所想的重叠顺序，需要CSS的绝对定位来实现，下面就来给大家说一下重叠样式的的CSS实现方法。

css可以通过对两个盒子进行定位，使两个盒子在页面同一位置显示来实现两个盒子重叠。

position 属性规定元素的定位类型。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

示例：

div盒子重叠

.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}

/* 背景为黄色 */

我背景为红色

我背景为黄色

效果如下：

实例说明：

我们使用position实现绝对定位，对父级设置position:relative属性，对其子级设置position:absolute加上left或right和top或bottom实现子级在父级内任意定位。

在原始情况下重叠是按DIV代码本身顺序排列，越后输入的DIV盒子其越靠前(浮在上面)。除了改变源代码本身div代码在html顺序，我们还可以使用css z-index实现DIV层排列顺序。