position 定位问题

position定位技术:

    应用场景:一般情况是当网页出现内容覆盖时,使用定位属性。

        1) relative :相对定位

        2)  absolute :绝对定位

        3)  fixed :固定定位

        relative : 相对定位

                特点:(1)元素设置相对定位后,盒子依然是占位的;

                          (2)绝对定位会以定位盒子作为参照盒来进行精确定位;

        absolute : 绝对定位

                特点:(1)元素设置绝对定位后,盒子的宽度会从100%变成自适应,并且没有占位;

                          (2)默认会以浏览器的四个角为坐标原点,通过left、top、right、bottom 来精确定位;

         fixed : 固定定位

                特点 : (1)盒子设置固定定位后,盒子的宽度会变为自适应,并且没有占位;

                            (2)默认浏览器的四个角为坐标原点,通过left、top、right、bottom 来定位;

                            (3)不会随着页面内容而滚动


    在定位时有时候会出现层级问题,那设置定位元素的层级关系会用到  :  z-index

        z-index :   (1)   只对定位元素生效;

                          (2)值越大,元素层级级别越高,可以为负值;

                          (3)数值不加单位;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值