定位的介绍、

标准文档流;块级元素会垂直排列,行内元素水平排列浮动实现了多个块级盒子在一排无缝排列显示

定位;能够让我们把一个元素从他原本在正常文档流的位置移动到另一个位置

相对定位

position

取值;relative

位置属性top设置包含块顶部的距离

bottom设置距离包含块底部的距离

left设置距离包含块左侧的距离

right设置距离包含块右侧的距离

相对元素在正常文档流中的位置移动它,把一个正常文档流的元素从它的默认值位置安坐标进行相对移动(相对定位他是相对于元素本身的位置发生移动)他原本所占的空间不会变

特性

不会脱离文档流

提升层级

在不定义位置偏移属性时,对元素没有影响

使用场景:一般搭配绝对定位使用大绝对定位的父级(父相子绝)

绝对定位

position

取值:absolute

特性:脱离文档流

提升层级

绝对定位:相对于定位父级的位置进行移动,如果没有定位父级,一层一层的往上找,一直找到body,相对于body进行定位

固定定位(元素的位置相对浏览器的窗口进行位置移动)

语法:positon:fixed

特性:会使元素脱离文档流

提升层级

静态定位:把元素放在文档流的默认位置,盒子垂直排列html元素的默认值,也就是没有定位正常的文档流布局方式

语法:position:static

特性:元素不会受到位置偏移属性的影响

用于重置定位属性

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值