CSS是web开发中前端技术不可或缺的一部分，它可以用来美化页面，定位元素等。

其中div在页面布局中也扮演了非常重要的角色，我们通常会使用div来布局网页，将不同的元素分类和排列。

但是，在实际的开发中，可能会遇到一些问题，例如div被挡住了，导致页面呈现异常。那么如何解决这个问题呢？

.unclear {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: -10px;
  left: -10px;
}

.cover {
  width: 80px;
  height: 80px;
  background-color: green;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

.container {
  width: 200px;
  height: 200px;
  background-color: gray;
  position: relative;
}

在上面的代码中，我们定义了三个div，分别为unclear、cover和container。其中，unclear是最底下的层级，cover是在unclear上方的一层，container是最上面的层级。

看起来，cover应该会被container盖住，不会挡住unclear，可是结果是不对的，cover确实挡住了unclear。

这是因为z-index的使用不当导致的，z-index可以用来改变元素的层级，值越高的元素越在上面。我们给cover定义了z-index: 1，但是并没有给unclear和container定义z-index，所以它们的z-index默认值为auto，这样在unclear和container之间，由于它们的z-index相同，按照代码书写顺序，unclear就在下面了。

解决这个问题的方法很简单，只需要在unclear和container中其中一个定义一个z-index值就可以了，比如在container中添加z-index: 2，这样container就在unclear上面了，cover也就不能挡住unclear了。

.container {
  width: 200px;
  height: 200px;
  background-color: gray;
  position: relative;
  z-index: 2;
}

这样，我们就成功解决了div被挡住的问题。