如何在CSS中堆疊元素

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

方法1：使用位置屬性

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

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

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

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

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

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

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

.parent {
  位置：相對；
} 

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

好的。

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

父母

兒童1

孩子2

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

.Child-1 {
  左：0;
}

.Child-2 {
  左：150px;
}

.parent {
  位置：相對；
} 

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

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

方法2：使用CSS網格

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

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

 .parent {
  顯示：網格；
  網格板柱：250px 1fr;
  網格板行：150px 1fr;
}

。孩子 {
  網格區域：1/1 / 2/2;
} 

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

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

 .parent {
  顯示：網格；
  網格板柱：250px 1fr;
  網格板行：150px 1fr;
}

。孩子 {
  網格區域：1/1 / 2/2;
}

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

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

如果您發現這種技術難以可視化，我創建了一個CSS網格發電機，希望可以更清楚地看到事物。

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

以上是如何在CSS中堆疊元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！