CSS定位是用来控制元素在页面上的位置和排列方式的技术。CSS有三种基本的定位机制：普通流、浮动流、定位流，其中定位流包括相对定位、绝对定位和固定定位。以下是CSS定位的总结：
- 普通流：元素默认从上至下或者从左至右的排列顺序。
- 浮动流：添加了浮动的元素。
- 定位流：添加了定位的元素，包括相对定位、绝对定位和固定定位。
定位机制的区别：
- 相对定位：以元素原来的位置为基准，根据设置的偏移量进行定位，元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。
- 绝对定位：以离元素最近的设置了绝对或相对定位的父元素为基准，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位，元素脱离了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。
- 固定定位：以浏览器窗口为基准，固定在屏幕上的某个位置，不随页面滚动而滚动。
定位的属性：
- position：用于设置元素的定位方式，其属性值包括static、relative、absolute和fixed。
- top、right、bottom、left：用于设置元素相对于其定位父元素的偏移量。
- z-index：用于设置元素的层级，层级高的元素会覆盖在层级低的元素之上。
实现绝对定位盒子的水平垂直居中可以通过以下方式实现：
.box {
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: red;
}
定位的使用场景：
- 相对定位：用于微调元素的位置，使其相对于原来的位置移动一定的距离，但不影响其他元素的位置。
- 绝对定位：用于将元素定位在其父元素的某个位置，可以实现元素的居中、遮罩等效果。
- 固定定位：用于将元素固定在屏幕的某个位置，不随页面滚动而滚动，常用于实现导航栏、返回顶部等功能。
层级问题是CSS定位中需要注意的问题，其规则如下：
- 标准流盒子低于浮动的盒子，浮动的盒子又低于定位的盒子。
- 定位高于浮动，浮动高于标准流。
- 用法：必须有定位（除去static之外），给定z-index的值为层级的值（不给默认为0）。
- 层级为0的盒子，也比标准流和浮动高。
- 层级为负数的盒子，比标准流和浮动低。
- 层级不取小数。
- 层级一样，后面的盒子比前面的层级高。
- 浮动或者标准流的盒子，后面的盒子比前面的层级高。
- absolute是不占位置的，relative是占位的。而层级的高低，是和占不占位置没有关系的。
