css定位

css定位属性共有三种:

  1. 相对定位 relative
  2. 绝对定位 absolute
  3. 固定定位 fixed

相对定位:
相对与自己原来的位置定位,进行位置的调整。
原来的在标准留的位置继续占有,后边盒子仍以标准流对待他
所以并没有脱标(主要用限制绝对定位)
margin与相对定位调整位置的区别:
1.盒子和盒子的距离,间隙。相对定位:位置的调整
2.margin会影响后面的元素。相对定位不会影响别人。

绝对定位:

以盒子为参考点:
一个绝对定位的元素,如果祖先元素中出现了已定位的元素,那么将以该元素为参考点。
1.以最近的已经定位的祖先元素,不一定是父容器,也可以是祖元素。
2.不一定是相对对位,任何定位信息,都可以做子容器的参考点。
3.使用最多的子绝父相。
4.以父容器的border内侧点为参考点,进行定位。
应用:
1.压盖效果,一个div压在另一个div上面。
2.绝对定位的盒子居中。 left:50%;margin-left: -自身宽度的一半;
(绝对定位会脱标)


固定定位
相对浏览器进行定位
滚动条滚动,盒子位置始终不变
固定定位是特殊的绝对定位
固定在版心右侧:
用途:
1.网页返回顶部,侧边广告。
2.顶部固定导航条
在这里插入图片描述
补充
4、默认定位(static)
默认值时,设置坐标无效

知识点:absolute和relative的区别
1、是否占据文档流:absolute不占据;relative占据。
2、参考物不同:absolute参考HTML;relative参考自身

                                                               凤凰山的单身狗
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值