所谓定位，简单的来说就是将盒子定在某一个位置。所以定位其实也是按照规则进行摆盒子
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） |
| sticky | 粘性定位。根据用户的滚动位置进行定位。 |
相对定位
- 相对元素之前的位置
- 之前的位置还在文档流中
绝对定位
- 脱离文档流
- 找父级非static的元素进行偏移，找不到就层层往上，直到body
固定定位
- 脱离文档流
- 以浏览器为参照
粘性定位
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
- 占据原来的位置
- 以浏览器为参考
z-index
图层概念
只能在定位元素上生效
父子关系z-index不生效
.c1{
position: relative;
width: 100px;
height: 100px;
background-color: blueviolet;
top: 50px;
z-index: 1;
}
.c2{
position: relative;
width: 100px;
height: 100px;
background-color: #2be274;
left: 50px;
}
