[分享]css两个盒子如何定位

在CSS中，要让两个盒子相对定位，我们可以使用属性来实现，通常我们会先给两个盒子先设置一个相对的定位，然后通过top、bottom、left、right来确定它们的位置。.box1{ : relati...

在CSS中，要让两个盒子相对定位，我们可以使用position属性来实现，通常我们会先给两个盒子先设置一个相对的定位，然后通过top、bottom、left、right来确定它们的位置。

.box1{
  position: relative;
  top: 50px;
  left: 50px;
}
.box2{
  position: relative;
  top: 100px;
  left: 100px;
} 

上面的代码中，我们先给box1和box2都设置了相对定位，然后通过top和left属性来确定它们的位置，这样就可以让它们相对于文档流中的位置进行偏移了。

还有一种情况，如果我们想要让一些元素浮动在页面上方，不受文档流的影响，这时候我们就可以使用绝对定位来实现。

.box3{
  position: absolute;
  top: 0;
  left: 0;
}
.box4{
  position: absolute;
  top: 0;
  right: 0;
} 

上面的代码中，我们将box3和box4都设置成了绝对定位，并且用top、left、right属性分别确定它们在页面中的位置。

绝对定位和相对定位有很多相似之处，在使用的时候需要根据实际情况来选择适合的方法来解决问题。