CSS
前言
前面我们说过了CSS的浮动和清除浮动的方法。本篇的内容主要讲述position定位。后续还会有JS 的篇章。
开始前我们先来了解一下这几个属性：
| 属性 | 意 | 值 |
|---|---|---|
| top | 定义了元素的上顶部与其包含块顶部之间的偏移 | auto（默认值），%，px、cm 或inherit（继承） |
| left | 定义了元素的左边界部与其包含块左边界之间的偏移 | auto（默认值），%，px、cm 或inherit（继承） |
| right | 定义了元素的右边界部与其包含块右边界之间的偏移 | auto（默认值），%，px、cm 或inherit（继承） |
| bottom | 定义了元素的底部部与其包含块底部之间的偏移 | auto（默认值），%，px、cm 或inherit（继承） |
| z-index | 设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 | auto（默认值），数值，inherit（继承） |
| position | 规定元素的定位类型 | 看下个表 |
position属性值：
| 值 | 意 |
|---|---|
| static | 常规/静态/自然定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
| sticky | 磁贴/粘性/吸附定位 |
| inherit | 继承（不是定位方式） |
1.relative（相对定位）
1.1作用
是元素成为定位的参照物，官话：可定位的祖先元素。
1.2特点：
1.能使用 top/right/bottom/left/z-index进行定位。
2.相对定位的元素不会脱离常规流（相对自身原位置进行偏移）。
3可以使浮动元素发生偏移，并且控制他们的堆叠顺序。
4.任何元素都能设置为relative（相对定位）。设置relative（相对定位）的绝对定位后代，以父元素进行定位。（绝对定位中测试）
我们用两个实验来看看
测试1(三个高宽为80px的div，第2个设置相对定位，且偏移量为，顶部偏移10px，左边偏移-10px，)：
position:relative;
top:10px;
left:-10px;
复制即可 ：
<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">1</div>
<div style="position:relative;top:10px;left:-10px; width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #f00; ">2</div>
<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">3</div>
效果：
可见：第二个div 是从原位置进行偏移，且原位置保留。
测试2（两个设置左浮动并且设置相对定位高宽80px的div，第2个div 设置左偏移-80px， ）：
position:relative;
left:-80px;
分别把第一个div和第二个div设置z-index值(设置边框为1，颜色各不同。)；
z-index:1;
z-index:10;
我们用第二个div测试 ：
<div style="z-index:1; position:relative; float: left; width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">1</div>
<div style=" z-index:10; position:relative;float: left; left:-82px; width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #f00; ">2</div>
第一个div的z-index:1;第二个div的z-index:10;
第一个div的z-index:10;第二个div的z-index:1;
2.absolute（绝对定位）
2.1 作用
使元素脱离常规流。
2.2特点
1.脱离常规流，能使用 top/right/bottom/left/z-index进行定位。
2.设置尺寸要注意！百分比是以谁为参照物最近定位祖先元素（如果没有定义祖先元素，以body为参照物）。
3.不设置宽高 top/right/bottom/left值都为0时，填充最近定位祖先元素。
4. top/right/bottom/left值都为0时，外边距设置 auto auto；（居中效果！！）
5.如果没有定义祖先元素，以body为参照物。
我们用两个实验来看看
测试1(三个高宽为80px的div，第2个设置绝对定位，且偏移量为，顶部偏移10px，左边偏移-10px，)：
position:absolute;
top:10px;
left:-10px;
复制即可 ：
<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">1</div>
<div style="position:absolute;top:10px;left:-10px; width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #f00; ">2</div>
<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">3</div>
效果：
可见：第二个div 是从最近定位祖先元素（如果没有定义祖先元素，以body为参照物），原位置不保留。
测试2（在原有基础上添加一个div，宽为100px；外边距auto；定位方式:相对定位；）
<div style="width:100px; margin: auto; position: relative; border: 1px solid #000;">
<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">1</div>
<div style="position:absolute;top:10px;left:-10px; width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #f00; ">2</div>
<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">3</div>
</div>
可见：第二个div 是从最近定位祖先元素（也就是设置了相对定位的div），原位置不保留。
3. fixed（固定定位）
3.1作用
相对于浏览器窗口进行定位。
请自行测试一下！！
<div style="width:400px; height: 2000px; background-color: #ff0;">
<div style=" width: 100px; height: 100px; position: fixed; top: 50px; left: 0px; background-color: #0ff;">
广告
</div>
</div>
4.sticky（磁贴/粘性/吸附定位）
4.1作用
制造出吸附效果
4.2特点
1.如果产生偏移，原位置还会在常规流中。
2.如果它的最近祖先元素有滚动条，那么它的偏移标尺就是最近的祖先元素。
2.如果它的最近祖先元素没有滚动条，那么它的偏移标尺就是浏览器窗口。
自行测试
<div style="width:400px; height: 2000px; background-color: #ff0;">
<div style="width:100%; height: 100px; background-color:#0f0;"> 图</div>
<div style=" width: 100%; height: 100px; position:sticky; top: 0px; background-color: #0ff; ">
导航
</div>
</div>
5 static（常规/静态/自然定位）
5.1作用
常规流特性
5.2特性
1.无法使用 top/right/bottom/left/z-index进行定位。
2.在其它定位后使用，会让其它定位全部失效。
总结
本篇我们讲述了定位的几种方法，static是比较特殊的定位。因为 固定定位和吸附定位定位需要滚动条。截图不能完美体现效果，请自行测试。
css 属性检测 CSS 定位
如本文章描述有误请尽快联系博主！感谢您的阅读与帮助！