为了账号安全,请及时绑定邮箱和手机立即绑定

《css定位 position》(知识点小结)

标签:
Html/CSS

1 文档流

  • 1.HTML中的三种布局方式
    • 1.标准流
    • 2.浮动
    • 3.定位
  • 2.只有position属性值为relative、absolute、fixed才可以使用,top、right、bottom、left属性。

2 position-relative

     元素将相对于网页的最左最顶点为起始点,
       if(left≠0 && top≠0){
        向右进行X轴正方向运动,向下进行Y轴正方向运动     
       }
       if(left≠0 && bottom≠0){
        向右进行X轴正方向运动,向上进行Y轴正方向运动
        }
       if(right≠0 && top≠0){
        向左进行X轴正方向运动,向下进行Y轴正方向运动
       }
       if(right≠0 && bottom≠0){
        向左进行X轴正方向运动,向上进行Y轴正方向运动
       }

3 position-fixed

  • 1.常用使用场景
    • 1.对联广告
    • 2.登录弹窗

4 position-inherit

  • 1.继承父元素的position的属性值

5 z-index

  • 1.可以设置元素的叠加顺序,但依赖定位属性(relative、absolute、fixed)
  • 2.z-index大的元素会覆盖z-index小的元素
  • 3.z-index为auto的元素不参与层级比较
  • 4.z-index位负值,元素被普通流中的元素覆盖

6 定位和盒子模型的区别

  • 1.盒子模型通过改变元素外边距或者内边距来实现元素的移动
  • 2.定位是通过元素的位置移动来改变元素在网页中的位置
点击查看更多内容
4人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消