HTML CSS position 属性及relative、absolute、fixed区别

本文深入讲解CSS中的Position属性,包括static、relative、absolute和fixed四种值的含义与应用场景,帮助读者理解并灵活运用这些属性,实现网页元素的精确布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

position 是一个比较实用的功能,网页编程中必备技能!

在页面的编写过程中我们通常会用到html的position属性来合理安排我们标签的位置,来达到视觉的美观,所以我们需要加深对position这个属性的了解。

一、Position的属性值

position有四个值:static,relative,absolute,fixed;
在这里插入图片描述
定义看着云里雾里,下面具体说明

二、static

static就是html默认的文档流形式,一个块状元素独占一行如div、p,多个内联元素占一行如span、a;
实际实用确实不多,基本不使用。

三、relative

relative是相对于标签原来的位置偏移,请看图:
在这里插入图片描述
其实就是相对于自己的位置的改变,可以理解为自身的移动,偏移位置

四、absolute

absolute是相对于不是默认文档流形式的父类元素的位置偏移,如果父类元素是static的话,那就看父类元素的父类元素是不是非static的,一直找到body为止。
实际实用过程非常多,也是最多的。可以理解为相对于父亲元素的定位,那么在每个div里面,相同系列的每个模块特定位置展示出来,非常实用。
在这里插入图片描述
比如价格相对于父布局总是在同一个位置,就可以用这个属性来实现。

五、fixed

fixed是相对于浏览器窗口的位置偏移,很好理解,实际也非常实用,比如某一块内容固定在浏览器的某一个位置,永远在这个位置。最简单例子就是,返回顶部、底部按钮功能性业务。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

野火少年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值