css中定位方式的参照物

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

CSS中的定位方式是指通过不同的属性值来控制元素在文档流中的位置。在CSS中,有三种常见的定位方式,包括相对定位、绝对定位和固定定位。这些定位方式都是基于元素在文档流中的参照物进行计算的。相对定位是指

CSS中的定位方式是指通过不同的属性值来控制元素在文档流中的位置。在CSS中,有三种常见的定位方式,包括相对定位、绝对定位和固定定位。这些定位方式都是基于元素在文档流中的参照物进行计算的。
相对定位是指元素相对于其在文档流中默认的位置进行偏移。相对定位的参照物是元素在文档流中的原始位置。可以使用top、bottom、left和right属性来控制相对定位的位置。
p{
  position: relative;
  top: 10px;
  left: 20px;
} 

绝对定位是指元素相对于其父元素的位置进行定位。如果没有父元素,则相对于文档流中最近的已定位的祖先元素进行定位。绝对定位的参照物是父元素或祖先元素。可以使用top、bottom、left和right属性来控制绝对定位的位置。
div{
  position: relative;
}

p{
  position: absolute;
  top: 10px;
  left: 20px;
} 

固定定位是指元素相对于浏览器窗口的位置进行固定。固定定位的参照物是浏览器窗口。可以使用top、bottom、left和right属性来控制固定定位的位置。
p{
  position: fixed;
  top: 10px;
  left: 20px;
} 

总的来说,CSS中的定位方式是通过不同的参照物来计算元素的位置。掌握不同的定位方式可以帮助我们更好地控制页面布局。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css中定位方式的参照物

粉丝

0

关注

0

收藏

0

已有0次打赏