定位

1、静态定位

介绍:静态定位是默认值,就是之前认识的标准流。

代码:position:static;

注意点:

            ①、静态定位就是之前的标准流,不能通过方位属性进行移动;

            ②、我们之后说的定位不包括静态定位,一般特指后几种:相对、绝对、固定;

 

2、相对定位

介绍:自恋型定位,相对于自己之前的位置进行移动;

代码:position:relative;

特点:

         ①、 需要配合方位属性实现移动;

         ②、相对于自己原来位置进行移动;

         ③、在页面中占位置→没有脱标;

应用场景:

              ①、配合绝对定位组CP(子绝父相);

              ②、用于小范围的移动;

 

3 绝对定位

介绍:拼爹型定位,相对于非静态定位的父元素进行定位移动;

代码:position:absolute;

特点:

         ①、需要配合方位属性实现移动;

         ②、 默认相对于浏览器可视区域进行移动;

         ③、在页面中不占位置→已经脱标;

应用场景:①、配合绝对定位组CP(子绝父相)

(1)、子绝父相介绍:

场景:让子元素相对于父元素进行自由移动。

含义:

       ①、子元素:绝对定位

       ②、父元素:相对定位

子绝父相好处:父元素是相对定位,则对网页的布局影响最小;

(2)、(拓展)子绝父绝特殊场景

场景:在使用子绝父相的时候,发现父元素已经有绝对定位了,此时直接子绝即可!

原因:父元素已经有定位,已经满足要求了,如果盲目修改父元素定位方式,可能会影响之前写好的布局。

 

4 固定定位

介绍:死心眼型定位,相对于浏览器进行定位移动

代码:position:fixed;

特点:

       ①、需要配合方位属性实现移动;

       ②、相对于浏览器可视区域进行移动;

       ③、在页面中不占位置→已经脱标;

应用场景:让盒子固定在屏幕中的某个位置;

tip:定位的元素会脱离标准流,脱离标准流之后的元素宽高默认由内容撑开;

posted @   小石糖记  阅读(157)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示