[分享]css两个方块同时在一起

今天我们来学习一个有趣的CSS效果，那就是如何让两个方块同时在一起。我们可以使用CSS的属性以及top和left属性来实现这个效果。 .square1 { : absolute; top: 50px;...

今天我们来学习一个有趣的CSS效果，那就是如何让两个方块同时在一起。我们可以使用CSS的position属性以及top和left属性来实现这个效果。

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

    .square2 {
        position: absolute;
        top: 50px;
        left: 250px;
        width: 100px;
        height: 100px;
        background-color: blue;
    } 

在上面的代码中，我们定义了两个方块的样式，分别是.square1和.square2。我们使用了绝对定位的position属性，使得这两个方块可以从文档流中脱离出来，从而可以按照我们设定的top和left属性的值来摆放。

其中，我们在.square1中设定了left为100px，而在.square2中设定了left为250px。这就意味着，两个方块的左边缘之间有150px的距离。

如果我们将这两个方块放在同一个父元素中，那么我们需要给这个父元素加上position: relative;的样式，以保证两个子元素可以在相对于这个父元素的坐标系中进行定位。

 .container {
        position: relative;
    } 

最后，我们只需要在HTML中按照如下方式写入代码即可：

 <div class="container">
        <div class="square1"></div>
        <div class="square2"></div>
    </div> 

这样，两个方块就可以同时在一起了。