css两个盒子如何定位

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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

在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属性分别确定它们在页面中的位置。

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

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两个盒子如何定位

粉丝

0

关注

0

收藏

0

已有0次打赏