如果想要實(shí)現(xiàn)兩個(gè)盒子重疊，并且要讓它們按照我們所想的重疊順序，需要CSS的絕對(duì)定位來(lái)實(shí)現(xiàn)，下面就來(lái)給大家說(shuō)一下重疊樣式的的CSS實(shí)現(xiàn)方法。

css可以通過(guò)對(duì)兩個(gè)盒子進(jìn)行定位，使兩個(gè)盒子在頁(yè)面同一位置顯示來(lái)實(shí)現(xiàn)兩個(gè)盒子重疊。

position 屬性規(guī)定元素的定位類型。

這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過(guò)絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類型。相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。

示例：

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注釋說(shuō)明： 背景為紅色 */

.div-b{ position:absolute; left:50px; top:60px; background:#FF0; width:400px; height:200px}

/* 背景為黃色 */

我背景為紅色 我背景為黃色

效果如下：

實(shí)例說(shuō)明：

我們使用position實(shí)現(xiàn)絕對(duì)定位，對(duì)父級(jí)設(shè)置position:relative屬性，對(duì)其子級(jí)設(shè)置position:absolute加上left或right和top或bottom實(shí)現(xiàn)子級(jí)在父級(jí)內(nèi)任意定位。

在原始情況下重疊是按DIV代碼本身順序排列，越后輸入的DIV盒子其越靠前(浮在上面)。除了改變?cè)创a本身div代碼在html順序，我們還可以使用css z-index實(shí)現(xiàn)DIV層排列順序。

總結(jié)

以上是生活随笔為你收集整理的html5两个标签重叠,css中两个盒子如何重叠？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。