四种定位模式简单总结

四种定位总结

定位模式是否脱标占有位置是否可以使用边偏移移动位置基准
静态static不脱标,正常模式不可以正常模式
相对定位relative脱标,占有位置可以相对自身位置移动(自恋型)
绝对定位absolute完全脱标,不占有位置可以相对于定位父级移动位置(拼爹型)
固定定位fixed完全脱标,不占有位置可以相对于浏览器移动位置(认死理型)

定位模式转换

跟 浮动一样, 元素添加了 绝对定位和固定定位之后, 元素模式也会发生转换, 都转换为 行内块模式,

行内块 的宽度和高度 跟内容有关系

因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后,可以不用转换模式,直接给高度和宽度就可以了。

	/* 子绝父相 */
	position: absolute;
	/*加了定位 浮动的的盒子  margin 0 auto 失效了*/
	left: 50%;
	margin-left: -100px;
	top: 50%;
	margin-top: -100px;
	/* 调整了哪里就改哪里 */
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值