[CSS全解]CSS定位

发表于 2019-09-01 更新于 2023-05-17 分类于学习笔记

本文章资料主要来自饥人谷2020版前端体系课，本文为课程笔记。

布局 vs 定位

布局是基于平面空间的二维坐标，定位基于垂直于屏幕的三维坐标。

文档流与盒模型

之前我们知道，文档流(Normal Flow)正常从上到下，从左到右根据盒模型依次排列，但是一个盒模型其实有多个图层，从下到上依次为：

background
border
块级子元素
浮动元素
内联子元素(文字内容)

通过上面的模型，可知浮动元素脱离文档流，就是从第三层的块级子元素变为了第四层的浮动元素。

`position`属性

position属性值
- static 默认值，元素在文档流中
- relative 相对定位，元素图层上浮，但不脱离文档流
- absolute 绝对定位，基于父级元素position属性值为非static进行定位
- fixed 固定定位，定位基准为viewport
- sticky 粘滞定位
经验
- absolute与relative结合使用
- position值为absolute或fixed时，添加top或left属性
- sticky兼容性较差，面试时可以提到

`position: relative;`

使用场景
- 用于做位移(很少使用)
- 用于做于position: absolute;元素的父级元素
配合z-index属性
- z-index: auto; 默认值，不新建层叠上下文
- z-index: 0/1/2; 图层排列顺序，数字越大图层越靠上
- z-index: -1/-2; 图层排列顺序，数字越小图层越靠下
经验
- 不推荐z-index: 9999;
- 学会管理z-index

`position: absolute;`

使用场景
- 元素脱离原来的位置，另起一层，比如对话框关闭按钮
- 鼠标提示
配合z-index
经验
- 不是相对于relative进行定位的，是相对于父类元素最近一个定位元素(position属性值为非static的元素)进行定位的
- 某些浏览器如果没有top/left属性位置会错乱
- 善用left: 100%/bottom: 100%
- 善用left: 50%，并添加负外边距

`position: fixed;`

使用场景
- 广告
- 回到顶部按钮
配合z-index
经验
- 移动端最好不要使用，bug较多
- 可以搜索关键字”移动端fixed”

`position: sticky;`

使用场景
- 导航
注意
- can i use上一片红。。。

层叠上下文

当内部元素设置position等属性时，会浮动到外部元素最上方，并且z-index: 0;
当内部元素的z-index为负数时，会位于外部元素background下方
但此时的z-index仍作用在当前层叠上下文中
层叠上下文(堆叠上下文)
- z-index只作用在当前层叠上下文中
- 每一个层叠上下文就是一个新的作用域
- 当前作用域的z-index与其他作用域无关
- 处在同一作用域的z-index才能进行比较
- 那些属性可以创建层叠上下文
  - MDN
  - 重点属性z-index/flex/opacity/transform

0%