关于定位(绝对/相对)

定位(相对定位/绝对定位):

通俗的说就是设置元素在页面中的位置,他是可以实现元素之间的层叠关系的。HTML5中常见的定位属性有以下几点:
1.position:static;(默认值,没有定位)
2.position:relative;(相对定位:相对于当前元素自身进行偏移,不能独立存在。不使元素脱离文档流,空间继续保留,如果没有定义偏移值,那么对元素本身没有影响。)
例:初始设置绿色块位于红色块水平居中;
在这里插入图片描述
在这里插入图片描述
当我们想自定义绿色块的位置:向下走100px,向右走50px;
在这里插入图片描述
注意看定义的属性偏移值,它是跟绿色块位移的方向是相反的(或者是可以写成top:100px;right:50px;),因为是以自身为参照物,所以位移的属性值可以是负数。
3.position:absolute;(绝对定位:默认下是以可是窗口页面进行定位,使元素脱离文档流,但是如果定义祖先元素(position:relative;),那么就是相对于祖先元素进行偏移)
还是以上面为例子,让绿色块相对于红色块进行偏移。
在这里插入图片描述
由此可见绿色块是完全相对于红色块向下偏移了100px,向右偏移了50px
前提是绿色块是包含在红色块内的,红色块相当于就是绿色块的祖元素,可以进行相对定位,这种相对运用的较多。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值