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

css可以通過對兩個盒子進行定位，使兩個盒子在頁面同一位置顯示來實現(xiàn)兩個盒子重疊。

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

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

示例：

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實現(xiàn)絕對定位，對父級設(shè)置position:relative屬性，對其子級設(shè)置position:absolute加上left或right和top或bottom實現(xiàn)子級在父級內(nèi)任意定位。

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

總結(jié)

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

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