CSS 知识点总结

CSS 定位

之前已经介绍了布局，那么布局和定位的区别是什么呢？

• 布局是在屏幕平面上的
• 定位是在垂直于屏幕的

定位通过 position 属性进行创建，一共分为五个值

• static 默认值，待在文档流里
• relative 相对定位，升起来，但不脱离文档流
• absolute 绝对定位，定位基准是祖先元素里的非 static，最近的定位元素
• fixed 固定定位，定位基准是 viewport 视口
• sticky 粘滞定位，在移动端存在太多bug，不做过多介绍

position: relative
使用场景如下：

打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）

1. 用于做位移(不常用)
2. 用于给 absolute 元素做定位基准

配合 z-index 使用

• z-index: auto 默认值，不创建新层叠上下文
• z-index: 0/1/2
• z-index: -1/-2

默认每一个 z-index 为 auto ，auto 计算出来的值是 0 。
position: absolute
使用场景如下：
脱离原来的位置，另起一层。比如对话框的关闭按钮、鼠标提示等。
配合 z-index