css下面元素不能遮住上面元素

CSS中有一条规则：下面的元素不能遮住上面的元素。这是因为在HTML中，页面元素默认按照它们在文档中出现的顺序堆叠在一起，后面的元素会跑到前面元素的上面显示。

如果我们想要覆盖和遮住下面的元素，可以通过CSS中的z-index属性来实现。z-index属性可以指定元素在堆叠顺序中的层级，值越大，越靠上，也就越会被其他元素遮住。

 .box-1{
    position: relative;
    z-index: 2;
  }
  .box-2{
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1;
  } 

在上面的例子中，.box-1元素因为z-index值的原因会被放在.z-box-2元素上面。但也要注意，z-index属性只在出现了定位属性（如relative、absolute、fixed等）的元素才有效。

另外还有一种情况需要注意，就是在HTML中，某些元素具有天然的堆叠顺序，无法通过z-index改变。如在img和input标签中，它们的层级和它们在文档中的出现顺序有关，而无法通过CSS改变。

总之，CSS中下面的元素不能遮住上面的元素，并且要遮住下面的元素必须使用z-index属性，并且要注意元素的定位属性和堆叠顺序的天然性。