CSS定位

相对定位

通过position: relative来开启相对定位，相对定位的特点如下：

1. 开启相对定位之后，如果不设定偏移量，元素不会发生任何变化
2. 开启相对定位不会使元素脱离文档流
3. 开启相对定位不会改变元素的性质，块元素还是块元素，行内元素还是行内元素
4. 开启相对定位会提升元素的层级
5. 相对定位是参照于元素在文档流中的位置进行定位的

示例
两个长宽都是100px的div box1和box2，需要将box2移动到和box1处于一行

div {
    width: 100px;
    height: 100px;
}

.box1 {
    background-color: aquamarine;
}

.box2 {
    background-color: orange;
	position: relative;
    left: 100px;
    top: -100px;
}

<div class="box1">box1</div>
<div class="box2">box2</div>

绝对定位

通过position: absolute来开启绝对定位，绝对定位的特点如下：

1. 开启绝对定位之后，如果不设置偏移量，元素不会发生任何变化
2. 开启绝对定位之后，元素会从文档流中脱离
3. 开启绝对定位，会改变元素的性质，行内元素会变成块元素，块元素的宽高会被内容撑开
4. 开启绝对定位后提示元素的层级
5. 绝对定位是相对于其包含块进行偏移的

包含块释义

1. 正常情况下，包含块就是距离当前元素最近的祖先块元素
2. 绝对定位开启的话，包含块就是距离当前元素最近的开启了定位的祖先元素，如果其祖先元素都没有开启定位，那么根元素(html)就是它的包含块

示例 1
两个长宽都是100px的div box1和box2，需要将box2移动到和box1处于一行

div {
    width: 100px;
    height: 100px;
}

.box1 {
    background-color: aquamarine;
}

.box2 {
    background-color: orange;

    position: absolute;
    /* 浏览器有默认样式，magin: 8px */
    left: 108px;
    /* 基于浏览器左上角移动8px */
    top: 8px;
}

<div class="box1">box1</div>
<div class="box2">box2</div>

示例 2
两个长宽都是100px的div box1和box2，拥有共同的父元素div.box0。需要将div.box0移动到位置为left: 500px top: 100px，然后将box2移动到和box1处于一行

div {
    width: 100px;
    height: 100px;
}

.box0 {
    width: 400px;
    height: 400px;
    background-color: brown;

    position: relative;
    left: 500px;
    top: 100px;
}

.box1 {
    background-color: aquamarine;
}

.box2 {
    background-color: orange;

    position: absolute;
    left: 100px;
    top: 0px;
}

<div class="box0">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

固定定位

通过position: fixed来开启固定定位，固定定位的特点如下：

1. 固定定位是一种特殊的绝对定位，所有绝对定位具有的属性固定定位都具备
2. 固定定位是相对于浏览器的浏览视口进行偏移的，不会随着网页的滚动条移动而移动

粘滞定位

通过position: sticky来开启粘滞定位，粘滞定位的特点如下：

1. 基本属性和相对定位类似
2. 滞定位可以在元素到达某个位置时将其固定

绝对定位在其包含块中居中

box0是box1的父元素，box0开启相对定位，box1开启绝对定位，box1要在box0居中。

.box0 {
    width: 400px;
    height: 400px;
    background-color: brown;

    position: relative;
}

.box1 {
   width: 100px;
    height: 100px;
    background-color: aquamarine;

    position: absolute;

    /* 垂直居中 */
    top: 0px;
    bottom: 0px;
    /* margin: auto; */

    /* 水平居中 */
    left: 0px;
    right: 0px;
    margin: auto;
}