定位
1、静态定位
介绍:静态定位是默认值,就是之前认识的标准流。
代码:position:static;
注意点:
①、静态定位就是之前的标准流,不能通过方位属性进行移动;
②、我们之后说的定位不包括静态定位,一般特指后几种:相对、绝对、固定;
2、相对定位
介绍:自恋型定位,相对于自己之前的位置进行移动;
代码:position:relative;
特点:
①、 需要配合方位属性实现移动;
②、相对于自己原来位置进行移动;
③、在页面中占位置→没有脱标;
应用场景:
①、配合绝对定位组CP(子绝父相);
②、用于小范围的移动;
3 绝对定位
介绍:拼爹型定位,相对于非静态定位的父元素进行定位移动;
代码:position:absolute;
特点:
①、需要配合方位属性实现移动;
②、 默认相对于浏览器可视区域进行移动;
③、在页面中不占位置→已经脱标;
应用场景:①、配合绝对定位组CP(子绝父相)
(1)、子绝父相介绍:
场景:让子元素相对于父元素进行自由移动。
含义:
①、子元素:绝对定位
②、父元素:相对定位
子绝父相好处:父元素是相对定位,则对网页的布局影响最小;
(2)、(拓展)子绝父绝特殊场景
场景:在使用子绝父相的时候,发现父元素已经有绝对定位了,此时直接子绝即可!
原因:父元素已经有定位,已经满足要求了,如果盲目修改父元素定位方式,可能会影响之前写好的布局。
4 固定定位
介绍:死心眼型定位,相对于浏览器进行定位移动
代码:position:fixed;
特点:
①、需要配合方位属性实现移动;
②、相对于浏览器可视区域进行移动;
③、在页面中不占位置→已经脱标;
应用场景:让盒子固定在屏幕中的某个位置;
tip:定位的元素会脱离标准流,脱离标准流之后的元素宽高默认由内容撑开;
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现