css下边的盒子被上边的遮挡

在设计网页布局的时候，我们可能会遇到下边的盒子被上边的元素遮挡的情况。这种问题的出现通常是由于CSS的布局机制以及HTML的文档流造成的，但是我们可以通过一些方法来解决这个问题。

/* CSS代码片段 */
.box {
  height: 200px;
  width: 200px;
  background-color: red;
  margin-top: -50px;
} 

上面的代码定义了一个高度为200px，宽度为200px，背景颜色为红色的盒子，并给盒子设置了一个-50px的边距。这个边距会使盒子的上边距向上移动，从而会遮挡上面的元素。

解决这个问题的方法有多种，其中一种比较常见的方法是给上面的元素设置一个margin-bottom的值，这样可以使上边的元素下移，从而不被下面的盒子遮挡。另外一种方法是给下面的盒子设置一个z-index的值，这样可以将盒子的层级提高，从而盒子会覆盖上面的元素。

/* CSS代码片段 */
.upper {
  margin-bottom: 50px;
}
.box {
  height: 200px;
  width: 200px;
  background-color: red;
  margin-top: -50px;
  z-index: 1;
} 

上面的代码解决了下面的盒子被上面的元素遮挡的问题。我们给上面的元素设置了一个margin-bottom的值，从而使元素下移，不被下面的盒子遮挡。同时，我们也给下面的盒子设置了一个z-index的值，使盒子的层级提高，覆盖上面的元素。

在开发网页布局的时候，出现这种问题比较常见。解决这个问题的关键是理解CSS的布局机制，以及合理运用CSS的属性来达到我们的效果。