CSS兩個(gè)矩形疊加的方法

在CSS中，我們可以通過(guò)設(shè)置兩個(gè)矩形的位置、大小和顏色來(lái)實(shí)現(xiàn)疊加效果，下面是一個(gè)簡(jiǎn)單的示例代碼：

HTML結(jié)構(gòu)：

<div class="rectangle1"></div>
<div class="rectangle2"></div>

CSS樣式：

.rectangle1 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
}
.rectangle2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 20px;
  left: 20px;
}

在這個(gè)示例中，我們創(chuàng)建了兩個(gè)矩形，分別設(shè)置了它們的寬度、高度和背景顏色，我們使用position: absolute;將兩個(gè)矩形都設(shè)置為***定位，這意味著它們可以疊加在一起，我們通過(guò)調(diào)整top和left屬性來(lái)微調(diào)矩形的位置，以達(dá)到理想的疊加效果。

這只是一個(gè)簡(jiǎn)單的示例，在實(shí)際應(yīng)用中，您可能需要更多的控制和調(diào)整，這個(gè)基本的方法是相同的：設(shè)置兩個(gè)矩形的樣式和位置，以實(shí)現(xiàn)疊加效果。