css 定位

本文详细介绍了CSS的三种基本定位机制——普通流、浮动和相对定位,着重讲解了相对定位、绝对定位(依赖定位祖先元素或文档)、固定定位(相对于窗口定位)以及CSS3新增的粘性定位,这些都会影响元素在页面中的布局和脱离文档流的过程。
摘要由CSDN通过智能技术生成

定位机制

CSS 有三种基本的定位机制:普通流、浮动和绝对定位

定位

相对定位(possition:relative)

  1. 相对定位,如果没有偏移量(left/right/top/bottom)就是正
    常显示;
  2. 根据原来的位置进行偏移
  3. 不会使元素脱离文本流

2、绝对定位 (position:absolute)

1.如果使用绝对定位,有定位祖先元素就相对于定位祖先元素发生偏
移,没有定位祖先元素就会相对于整个文档发生偏移(绝对 相对 固
定)
2.使元素脱离文档流和文本流

固定定位 (position:fixed)

1.相对于整个窗口进行定位,不会受滚动条影响
2.使元素脱离文档流和文本流

4、粘性定位

sticky:(这是 css3 新增的属性值)粘性定位。最初会被当作是
relative,相对于原来的位置进行偏移;一旦超过一定阈值之后,会
被当成 fixed 定位,相对于视口进行定位

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值