[分享]css两个div 覆盖了

在前端开发中，使用CSS可以实现很多的布局效果。其中，有一个常见的问题就是两个div覆盖在一起，该如何解决呢？下面，我们来看一下具体的解决方案。首先，我们需要明确两个div覆盖在一起的原因： div...

在前端开发中，使用CSS可以实现很多的布局效果。其中，有一个常见的问题就是两个div覆盖在一起，该如何解决呢？

下面，我们来看一下具体的解决方案。首先，我们需要明确两个div覆盖在一起的原因：

  div {
      position: absolute;
    } 

可以发现，两个div都设置了position: absolute属性，所以它们会出现重叠的情况。为了解决这个问题，我们需要对它们进行调整。

下面，我们来分别修改两个div的样式，使得它们不再出现覆盖的情况：

  .div-1 {
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .div-2 {
      position: absolute;
      top: 100px;
      left: 100px;
    } 

其中，.div-1和.div-2是两个div的类名，通过设置不同的top和left值，它们就不会再出现覆盖的情况了。

除了使用top和left属性之外，我们还可以使用其他的CSS属性，比如z-index属性，来控制两个div的显示顺序。不过，这需要我们对z-index属性有一定的了解才能使用。

综上所述，通过修改两个div的样式，我们可以很容易地解决两个div覆盖在一起的问题。在实际开发中，我们也需要根据具体的情况来选择不同的解决方案。