CSS 的 position(定位)属性

position 属性指定了元素的定位类型。

position 属性有五个值:

  • static
  • relative
  • absolute
  • fixed
  • sticky
    (sticky是CSS3新属性。)
  • inherit

一、static

静态定位。是默认值。即没有定位。正常的文档流。 不受 top、bottom、left、right属性影响。

二、relative

相对定位。相对于其原本的位置的定位。移动相对定位元素,但它原本所占的空间不会改变。

三、absolute

绝对定位。相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
脱离正常文本流。

四、fixed

固定定位。相对于浏览器窗口的固定位置。即使窗口滚动元素也不会移动。

五、sticky

粘性定位。sticky 英文是粘,粘贴。在 position:relative 与 position:fixed 定位之间切换。

当页面滚动超出目标区域时,它的表现就像 position:fixed,它会固定在目标位置。

元素定位表现为 在跨越特定阈值之前为相对定位,之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top,right,bottom ,left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

参考菜鸟教程 https://www.runoob.com/css/css-positioning.html

六、inherit

继承。从父元素继承 position 属性的值。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

欢莱

为您解决问题,此项目我成功完成

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值