CSS盒子如何遮蓋下一個(gè)

在CSS中，可以使用多種方法使一個(gè)盒子遮蓋下一個(gè)盒子，***常用的是使用***定位（absolute positioning）或相對(duì)定位（relative positioning）來(lái)實(shí)現(xiàn)。

***定位是一種將元素從文檔流中刪除并放置在指定位置的方式，通過(guò)***定位，你可以將一個(gè)盒子放置在另一個(gè)盒子的上面，從而遮蓋下一個(gè)盒子，你可以使用以下CSS代碼將一個(gè)盒子放置在另一個(gè)盒子的上面：

.box1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #ff0000;
}
.box2 {
  position: absolute;
  top: 200px;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #00ff00;
}

在這個(gè)例子中，box1會(huì)遮蓋box2，因?yàn)?code>box1的top屬性設(shè)置為0，而box2的top屬性設(shè)置為200px，所以box1會(huì)出現(xiàn)在box2的上面。

另一種方法是使用相對(duì)定位（relative positioning），相對(duì)定位是一種將元素從文檔流中刪除并放置在相對(duì)于其原始位置的位置，通過(guò)相對(duì)定位，你可以將一個(gè)盒子向右或向下移動(dòng)，從而遮蓋另一個(gè)盒子，你可以使用以下CSS代碼將一個(gè)盒子向右移動(dòng)并遮蓋另一個(gè)盒子：

.box1 {
  position: relative;
  left: -200px;
  width: 200px;
  height: 200px;
  background-color: #ff0000;
}
.box2 {
  position: relative;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #00ff00;
}

在這個(gè)例子中，box1會(huì)向右移動(dòng)200像素并遮蓋box2，因?yàn)?code>box1的left屬性設(shè)置為-200px，而box2的left屬性設(shè)置為0，所以box1會(huì)出現(xiàn)在box2的右邊。

除了***定位和相對(duì)定位，還有其他方法可以實(shí)現(xiàn)盒子的遮蓋效果，例如使用z-index屬性來(lái)控制盒子的堆疊順序，但***定位和相對(duì)定位是***常用的方法。