css中定位有哪些属性

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

CSS中定位是非常重要的部分,它可以让我们精确地控制元素在文档中的位置。下面我们来看看CSS中几种常用的定位属性。 position: static | relative | absolute | f

CSS中定位是非常重要的部分,它可以让我们精确地控制元素在文档中的位置。下面我们来看看CSS中几种常用的定位属性。

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

1. static

默认属性,元素在文档中的位置不受CSS定位属性的影响。

2. relative

元素的位置是相对于它本来所处的位置来进行定位的。在使用relative属性时,可以通过top, right, bottom, left四个属性来调整元素的位置。

 div {
        position: relative;
        top: 20px;
        left: 30px;
    } 

3. absolute

元素的位置是相对于最近的已定位祖先元素来进行定位的。如果没有已定位祖先元素,则是相对于文档的body元素。在使用absolute属性时,同样可以通过top, right, bottom, left四个属性来调整元素的位置。

 div {
        position: absolute;
        top: 50px;
        right: 20px;
    } 

4. fixed

元素的位置是相对于浏览器窗口的位置来进行定位的。在使用fixed属性时,同样可以通过top, right, bottom, left四个属性来调整元素的位置。

 div {
        position: fixed;
        top: 20px;
        right: 50px;
    } 

5. sticky

元素在跨越其父元素的边界之前是相对定位,之后是固定定位。当元素在父元素的可见范围内时,将表现为相对定位。当元素在其父元素之外滚动时,将定位为固定位置。

 div {
        position: sticky;
        top: 50px;
        left: 20px;
    } 

以上就是CSS中定位常用的属性。在实际开发中,我们可以根据需要灵活应用这些属性,来达到想要的效果。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css中定位有哪些属性

粉丝

0

关注

0

收藏

0

已有0次打赏