如果您想在網(wǎng)絡(luò)上創(chuàng)建出色且獨(dú)特的視覺體驗，最終將需要兩個元素重疊或存在於同一位置。您甚至可能只需要將它們放置在附近或彼此之間。讓我們探討兩種不同的方法來實(shí)現(xiàn)這一目標(biāo)，一種是具有位置屬性，另一種具有CSS網(wǎng)格。

方法1：使用位置屬性

您可能已經(jīng)知道這個立場：絕對；無論您想要的位置，都將絕對放在頁面上。在這種情況下，我們絕對將孩子定位到頁面的左上。無論父母在哪裡，孩子都將被絕對放在那個角落。

 。孩子 {
  ...
  位置：絕對；
  頂部：0;
  左：0;
} 

看到筆
CSS堆疊，莎拉·德拉斯納（Sarah Drasner）的絕對1（@sdras）
在Codepen上。

但這很脆！如果您要在頁面上放置某些東西，然後再出現(xiàn)其他事情，該怎麼辦？也許您在左上角一直想要的導(dǎo)航中有一個圖標(biāo)，但是第三方進(jìn)來並放入橫幅廣告。 （我不是在提倡橫幅廣告，但確實(shí)存在。）這將導(dǎo)航推向下來，現(xiàn)在圖標(biāo)不合適。

或者，假設(shè)您想製作一個可以在多個地方使用的獨(dú)立組件。無論您在何處使用它，您都需要重複使用並在其自身上下文中工作。

如果我們放置位置：相對；在父元素上，其內(nèi)部的任何位置：絕對；將絕對放置，相對於包含單元！

 。孩子 {
  / * ... */
  位置：絕對；
  頂部：0;
  左：0;
}

.parent {
  位置：相對；
} 

看到筆
CSS堆疊，Sarah Drasner的絕對2（@sdras）
在Codepen上。

好的。

如果我們想將兩個元素彼此堆疊在一起，我們可以使用相同的前提。在這裡，我們將在彼此之間堆疊兩個子元素，並以150個像素分開。我們將看到它們現(xiàn)在包含在同一父母中，並保持在其中。

父母

兒童1

孩子2

 。孩子 {
  位置：絕對；
  頂部：0;
}

.Child-1 {
  左：0;
}

.Child-2 {
  左：150px;
}

.parent {
  位置：相對；
} 

看到筆
CSS堆疊，Sarah Drasner的絕對3（@sdras）
在Codepen上。

這是一個小校園，但是我已經(jīng)使用了多年了，但我仍然掌握它。它跨瀏覽器始終如一地工作，甚至可以幫助您實(shí)現(xiàn)最奇怪和最獨(dú)特的位置。

方法2：使用CSS網(wǎng)格

重疊元素，堆疊它們或修改其位置的另一種好方法是CSS網(wǎng)格，具體取決於您需要支持的距離（您可以與Caniuse進(jìn)行檢查）。

我們可以將一些需要的東西放在這樣的容器中：

 .parent {
  顯示：網(wǎng)格；
  網(wǎng)格板柱：250px 1fr;
  網(wǎng)格板行：150px 1fr;
}

。孩子 {
  網(wǎng)格區(qū)域：1/1 / 2/2;
} 

看到筆
CSS堆疊，莎拉·德拉斯納（Sarah Drasner）（@sdras）的網(wǎng)格1
在Codepen上。

而且，如果一個要素應(yīng)堆疊在另一個元素上，我們可以將它們放在完全相同的網(wǎng)格區(qū)域中。我們還使用邊距稍微抵消它們。

 .parent {
  顯示：網(wǎng)格；
  網(wǎng)格板柱：250px 1fr;
  網(wǎng)格板行：150px 1fr;
}

。孩子 {
  網(wǎng)格區(qū)域：1/1 / 2/2;
}

.Child-2 {
  左鍵：200px;
} 

看到筆
CSS堆疊，莎拉·德拉斯納（Sarah Drasner）（@sdras）的網(wǎng)格2
在Codepen上。

如果您發(fā)現(xiàn)這種技術(shù)難以可視化，我創(chuàng)建了一個CSS網(wǎng)格發(fā)電機(jī)，希望可以更清楚地看到事物。

有很多使用這些技術(shù)的地方！您可以堆疊，層和偏移元素。您可以進(jìn)行導(dǎo)航，頁腳。您幾乎可以創(chuàng)建幾乎任何類型的佈局，在其中您希望對元素放置在頁面上的方式進(jìn)行更多的細(xì)粒度控制。

以上是如何在CSS中堆疊元素的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！