【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位

本文详细介绍了CSS定位的各个方面,包括静态定位、相对定位、绝对定位、固定定位和粘性定位。重点讨论了相对定位作为绝对定位父级的重要性,以及绝对定位在布局中的应用场景。还提到了固定定位在滚动窗口中的用法,以及粘性定位的特性。此外,文章还涵盖了定位的叠放次序(z-index)以及一些定位的拓展知识,如居中技巧和避免外边距塌陷的方法。
摘要由CSDN通过智能技术生成

1. 为什么需要

标准流和浮动无法做到:

  • 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子
  • 滚动窗口时,盒子固定在屏幕的某个位置

2. 定位组成

将盒子在某一置,所以定位也是在摆放盒子,按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

2.1 定位模式

用于指定一个元素在文档中的定位方式
通过CSS的position属性设置

position: static;   /*静态定位*/
position: relative; /*相对定位*/
position: absolute; /*绝对定位*/
position: fixed;    /*固定定位*/

2.2边偏移

决定了该元素的最终位置

top: 80px;    /*顶端偏移量,定义元素相对于其父元素上边线的距离*/
bottom: 80px; /*底部偏移量,定义元素相对于其父元素下边线的距离*/
left: 80px;   /*左侧偏移量,定义元素相对于其父元素左边线的距离*/
right: 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值