css中定位方式的区别是什么

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

CSS中有三种主要的定位方式,分别是相对定位、绝对定位和固定定位。这三种方式的区别在于它们对元素的位置定位方式不同。相对定位是元素相对于它原本的位置调整位置。使用相对定位让元素在文档流中仍占用原本的空

CSS中有三种主要的定位方式,分别是相对定位、绝对定位和固定定位。这三种方式的区别在于它们对元素的位置定位方式不同。
相对定位是元素相对于它原本的位置调整位置。使用相对定位让元素在文档流中仍占用原本的空间,这里的“相对于原本的位置”是指元素在文档流中的位置。相对定位可以通过CSS的“position: relative;”属性实现,语法如下:
p {
  position: relative;
  top: 10px;
  left: 10px;
} 

上面的例子中,我们使用了“top”和“left”属性,这两个属性用来指定元素在水平和垂直方向上相对移动的距离。这种移动是相对于元素在文档流中原来的位置进行的,且不会改变元素在文档流中的位置。
绝对定位是元素脱离文档流,相对于其第一个已定位的祖先元素(常见的是使用相对定位的元素)进行定位。如果没有已定位的祖先元素,则相对于html根元素进行定位。使用绝对定位的元素不再占用文档流中的空间,可以通过CSS的“position: absolute;”属性实现,语法如下:
p {
  position: absolute;
  top: 10px;
  left: 10px;
} 

上面的例子中,我们同样使用了“top”和“left”属性,不同的是,这里的相对移动距离是相对于已定位的祖先元素进行调整的。如果没有已定位的祖先元素,则相对于html根元素进行定位。
固定定位是元素相对于浏览器窗口进行定位。使用固定定位的元素同样不再占用文档流中的空间,可以通过CSS的“position:fixed;”属性实现,语法如下:
p {
  position: fixed;
  top: 10px;
  left: 10px;
} 

上面的例子中,我们同样使用了“top”和“left”属性,不同的是,这里的相对移动距离是相对于浏览器窗口上边缘和左边缘的距离进行调整的。
总之,CSS中定位方式的区别在于它们对元素的位置定位方式不同。相对定位是相对于元素在文档流中的位置进行调整;绝对定位是相对于已定位的祖先元素进行调整;固定定位是相对于浏览器窗口进行调整。需要根据具体的设计需求选择适当的定位方式。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css中定位方式的区别是什么

粉丝

0

关注

0

收藏

0

已有0次打赏