CSS定位

相对定位（relative）

相对定位的特点

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

偏移量
当元素开启定位后，可以通过偏移量来设置元素的位置。偏移量与margin最大的区别是margin会移动其他元素，偏移量top只移动自身，不影响其他。

可选值
垂直方向：

• top：定位元素和定位位置上边的距离
• bottom：定位元素和定位位置下边的距离。

定位元素垂直位置由top和bottom两个属性来控制，通常只使用其中一种 top值越大，越往下走，bottom越大，越往上走。

水平方向：

• left：定位元素和定位位置左侧的距离
• right：定位元素和定位位置右侧的距离

偏移量与margin的对比：

绝对定位（absolute）

绝对定位特点

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

包含块（containing block）

1. 正常情况下，包含块就是离当前元素最近的祖先块元素

例如：

<div><span><em>hello,world</em></span></div>

span的包含块为div，em的包含块也是div（span是行内元素，不是块元素）

2. 绝对定位的包含块

• 包含块就是离它最近的开启了定位的祖先元素
• 如果所有的祖先元素都没有开启定位则相对于根元素（body）进行定位

例如：

html代码

<div class="box1">1</div>
<div class="box2">2
    <div class="box3">3</div>
    <div class="box4">4</div>
</div>

固定定位（fixed）

固定定位也是一种绝对定位，大部分特点与绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位。

• 固定定位的元素不会随网页的滚动条滚动

例如：
html代码

<div class="box1">1</div>
<div class="box2">2
    <div class="box3">3</div>
    <div class="box4">4</div>
</div>

css代码

body{
    font-size: 50px;
}
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
}
.box2{
    width: 300px;
    height: 300px;
    background-color: rgb(52, 234, 49); 
 position: absolute;
}
   
.box3{
width: 200px;
height: 200px;
background-color: aqua;

}
.box4{
    width: 100px;
    height: 100px;
    background-color: tomato;
   position: fixed;
   left: 0;
   top: 0;
}

效果：

此时，box4与其最近的父元素box2都设置了position，但是与绝对定位不同的是，固定位置不在以设置了position的box2为参照位置，而是以视口（此时为body）为参照位置。

粘滞定位（sticky）

粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素达到某个位置时将其固定。

例如导航条：

css代码：

.nav{

width: 1210px;
height: 48px;
background-color: #E8E7E3;
margin: 100px auto;
position: sticky;
top: 0;

}

效果：

元素的层级

对于开启了定位的元素，可以通过z-index属性来指定元素的层级，z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示。

例如：

元素的层级相同时，优先显示下面的元素
例如：

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

最下面的box3元素排在最上面

祖先元素的层级再高，也不会盖住后代元素。

例如：

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

将box3的z-index设为3，box4的z-index设为1，box4依旧在box3的上面。因此，祖先元素的层级再高，也不会盖住后代元素。