-定位
CSS中的定位是一种用于控制元素在页面中的布局的属性。通过定位，可以精确地确定元素在页面中的位置。
1、相对定位
！！！一般用于微调
CSS中的一种定位方式，通过设置元素的`position`属性为`relative`来实现。相对定位使元素相对于其正常位置进行偏移，但不会影响其在文档流中的位置。
- 元素的移动是相对于它在文档流中的正常位置。偏移的方向由`top`、`right`、`bottom`、`left`属性决定。
- 相对定位的元素不会脱离文档流，它仍然占据着在文档流中的位置。
- 相对定位不会对其他元素造成影响，它的移动不会引起周围元素的重排。
- 不影响元素本身的任何特性
```css
.box1{
position: relative;
top: 10px;
left: 100px;
width: 100px;
height: 100px;
background-color: aqua;
}
```
2、绝对定位
通过设置元素的`position`属性为`absolute`来实现。
1、绝对定位使元素相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于视口进行定位。
2、在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
<!-- 子绝父相 -->
```css
.box2{
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: green;
}
```
3、 绝对定位的元素脱离了文档流，不再占据标准流中的位置。
绝对定位的元素导致父元素的高度塌陷，父元素设置高度
4、绝对定位的元素可以手动设置宽度和高度，
使其具有特定的尺寸。使元素转换为块元素
5、 使用绝对定位 元素再父级中居中的方法
//定位到视口中心
```css
.box{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
```3、固定定位
position: fixed;
1、固定定位是CSS中的一种定位方式，它使元素相对于浏览器视口进行定位。
2、固定定位的元素会随着用户滚动页面而保持固定的位置，不受页面滚动的影响。
```css
.a{
position: fixed;
top: 200px;
right: 0px;
width: 200px;
height: 200px;
background-color: aqua;
}
```