css中定位属性是哪个

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

CSS中的定位属性有许多种,而其中最主要而常用的就是position属性。 position: static | relative | absolute | fixed | sticky; 这些值分别

CSS中的定位属性有许多种,而其中最主要而常用的就是position属性。

 position: static | relative | absolute | fixed | sticky; 

这些值分别对应着五种不同的定位方式,下面分别介绍。

1. 静态定位(static)

这是默认的定位方式,元素按照正常的文档流进行排列,不受top、bottom、left、right的影响。

 position: static; 

2. 相对定位(relative)

元素按照正常文档流排列,但top、bottom、left、right可以改变元素相对于原来位置的偏移。

 position: relative; 

3. 绝对定位(absolute)

元素从文档流中脱离出来,相对于父级定位元素(有position属性的祖先元素或body)进行定位。若没有父级定位元素,则相对于body进行定位。

 position: absolute; 

4. 固定定位(fixed)

元素脱离文档流,相对于浏览器窗口进行定位。在滚动页面时,该元素的位置不会改变。

 position: fixed; 

5. 粘性定位(sticky)

该元素在正常情况下按照正常文档流排列,但当滚动到一定位置时,会随着页面一起滚动。相当于相对于父级定位元素和视口之间的距离进行定位。

 position: sticky; 

以上就是CSS中五种常用的定位方式。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css中定位属性是哪个

粉丝

0

关注

0

收藏

0

已有0次打赏