[分享]css两个div有交叉

CSS是前端开发中非常重要的一环，它可以为我们的网页赋予更加美丽和多姿多彩的样式。现在我们来看一个比较有趣的问题，就是如何实现两个div有交叉呢？ .container { display: fle...

CSS是前端开发中非常重要的一环，它可以为我们的网页赋予更加美丽和多姿多彩的样式。

现在我们来看一个比较有趣的问题，就是如何实现两个div有交叉呢？

  .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: #f2f2f2;
        }
        
        .box {
            width: 200px;
            height: 200px;
            background-color: #666;
            color: #fff;
            font-size: 24px;
            text-align: center;
            line-height: 200px;
            position: relative;
        }
        
        .box1 {
            top: -50px;
            z-index: 999;
        }
        
        .box2 {
            bottom: -50px;
        } 

上面的代码实现了一个容器，容器中有两个div，分别为box1和box2。

box1和box2在容器的竖直方向上进行了交叉，具体的实现方法如下：

1. 使用flex布局设置容器的对齐方式为居中对齐，保证里面的div都居中显示；
2. 给box1和box2添加相对定位，然后通过top和bottom属性来调整它们的位置；
3. 为了让box1在box2的上面，我们可以设置box1的z-index属性为较大的值。

这样，两个div就可以实现交叉显示了。

以上就是实现两个div交叉的方法，希望对大家有所帮助。