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中五种常用的定位方式。
粉丝
0
关注
0
收藏
0