CSS定位

定位

属性

  • top 定位框的顶部外边距边缘
  • right 定位框的右侧外边距边缘
  • bottom 定位框的底部外边距边缘
  • left 定位框的左侧外边距边缘
  • clip 剪裁绝对定位的元素
  • z-index 元素的堆叠顺序
    • 可设置正或负的堆叠顺序,具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前
    • 两个定位元素重叠而未指定z-index,则位于HTML代码中最后的元素将显示在顶部
  • position 元素的定位类型
    • static
    • relative
    • absolute
    • fixed
    • sticky

position

static

  • 默认情况下,HTML元素的定位方式为static(静态)。
  • 静态定位元素不受top、right、bottom、left属性的影响。
  • 不以任何特殊形式定位,根据页面的正常流进行定位。
<style>
    header,
    footer {
        height: 50px;
        width: 100%;
        border: 2px solid green;
    }
    
    .center {
        display: flex;
        height: 200px;
        position: relative;
        justify-content: space-between;
        align-items: center;
    }
    
    .center div {
        width: 500px;
        height: 150px;
        border: 2px solid red;
        margin: 2px;
    }
    
    .position {
        position: static;
        bottom: 20px;
        left: 30px;
        background-color: pink;
    }
</style>

<body>
    <header>header</header>
    <div class="center">
        <div>1</div>
        <div class="position">2</div>
        <div>3</div>
    </div>
    <footer>footer</footer>
</body>

在这里插入图片描述

relative

  • 相对定位的元素相对其正常位置进行定位
  • 设置相对定位的元素的top、right、bottom、left属性将导致其偏离其正常位置进行定位,不会对其余内容进行调整来适应元素留下的任何空间。即相对定位的元素仍然占据其原本的位置
 .position {
        position: relative;
        bottom: 50px;
        left: 70px;
        background-color: pink;
    }

在这里插入图片描述

absolute

  • 相对于最近的定位(除static以外的position属性)祖先元素进行定位
  • 如果没有祖先,适应文档主体,并跟随页面滚动
  • 脱离文档流,在页面中没有占据原本的位置
/*没有定位祖先*/
.position {
        position: absolute;
        top: 50px;
        right: 70px;
    }

在这里插入图片描述

/*相对于定位祖先定位*/   
   .center {
        display: flex;
        height: 200px;
        justify-content: space-around;
        align-items: center;
        position: relative|absolute|fixed|sticky;
    }
    
    .position {
        position: absolute;
        top: 50px;
        right: 70px;
    }

在这里插入图片描述

fixed

  • 相对于视口定位,即页面滚动,该元素始终位于同一位置,不随页面滚动
  • 设置相对定位的元素的top、right、bottom、left属性将导致其偏离其正常位置进行定位
  • 脱离文档流,在页面中没有占据原本的位置
.position {
        position: fixed;
        bottom: 50px;
        left: 70px;
    }

在这里插入图片描述

sticky

  • 根据用户的滚动位置进行定位,粘性元素根据滚动位置在相对(relative)和固定(fixed)定位之间切换。
  • 最开始为相对定位,直到在视口中遇到给定的偏移位置,将其固定定位在适当的位置

初始为相对定位

在这里插入图片描述

达到偏移位置,为固定定位

在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值