css盒子被图片挡住

最近在做网页布局的时候，遇到了一个问题：CSS盒子被图片挡住了。这个问题看似简单，但实际上却需要仔细分析。

.box{
  width:200px;
  height:200px;
  background-color:#ccc;
  position:relative;
}
.box img{
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
}
 

以上是我的CSS代码，首先，盒子的位置是相对的，图片的位置是绝对的。最重要的是图片的z-index值为-1。 这三点都是造成问题的元凶。盒子和图片是处于同一层级的，它们的定位有可能会相互影响。在这种情况下，我们需要通过Z-index来控制元素的层级关系。而我们将图片的z-index值设为-1后，它的层级就在盒子的下面了，从而就挡住了盒子。

所以，解决这个问题的方法就是给盒子一个更高的z-index值，或者把图片的z-index值设置为0或更高，这样盒子的层级就比图片高了，就不会被图片遮挡了。

.box{
  width:200px;
  height:200px;
  background-color:#ccc;
  position:relative;
  z-index:1;
}
.box img{
  position:absolute;
  top:0;
  left:0;
  z-index:0;
}
 

所以，在写CSS布局时，一定要注意元素的定位和层级关系，避免出现盒子被图片遮挡这样的问题。