HTML5+css3（定位属性，position：absolute，relative，fixed，相对定位，绝对定位，固定定位，z-index属性）
CSS定位属性
css的定位属性有三种：绝对定位、相对定位、固定定位
position：absolute; //绝对定位position：relative; //相对定位position：fixed ; //固定定位
相对定位
- 让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）
position: relative;/*相对定位：相对于自己原来的位置*/left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/
相对定位不脱标
-
相对定位：不脱标，老家留坑，别人不会把它的位置挤走。
-
也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。
相对定位的用途
- 如果想做“压盖”效果（把一个div放到另一个div之上），我们一般不用相对定位来做。相对定位，就两个作用：
（1）微调元素 （2）做绝对定位的参考，子绝父相
相对定位的定位值(负数表示相反的方向)
-
left：盒子右移
-
right：盒子左移
-
top：盒子下移
-
bottom：盒子上移
绝对定位 (abosolute)
- 定义在横纵坐标。原点在父容器的左上角或左下角
position :abosolute; //绝对定位
left:10px; //横坐标，x轴
top/bottom :20px; //纵坐标，y轴
绝对定位脱标
-
绝对定位的盒子脱离了标准文档流。
-
所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
-
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。
绝对定位的参考点（重要）
（1）如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角
（2）如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸（好好理解“首屏”二字），对应的页面的左下角
##以盒子模型为参考
-
一个绝对定位的元素，如果父辈元素也出现了定位（相对、绝对、固定）的元素，那么将以父辈这个元素为参考点
-
就是以父辈的左上角为参考点
-
要看定位的祖先元素，不一定是父亲，可能是爷爷（谁离自己最近，就以谁为参考点
-
任何定位都可以是儿子的参考点
- 子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。
-
绝对定位的儿子，直接无视参考点的盒子的padding，从border开始
固定定位(fixed)
- 相对浏览器窗口进行定位。无论页面如何滚动，这个盒子位置不变
- 用途1：网页右下角的“返回到顶部”
- **用途2：**顶部导航条
z-index属性
- 表示谁压着谁，数值大的压盖这数值小的
- 特性：
- 属性值大的位于上层，属性值小的位于下层
- z-index值没有单位，就是一个正整数，默认值为0
- 如果都没有写这个属性，或者属性一样。那么谁在HTML页面里面写在后面，谁就会压在上面（覆盖）。定位的元素永远可以压在没有定位的元素
- 只有定位的元素才可以使用z-index元素。浮动的元素不能用
- 从父现象：父亲怂了，儿子再牛逼也没有用。就是父亲1比父亲2的官大，那么儿子1的官比儿子2的官小，儿子1也是在上层
- 父亲的z-index属性大，即使儿子的z-index属性值小，那么也是在上层
作业
- 定位悬停文字
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 伪类悬停，伪元素 */.all p:hover::after{width: 120px;height: 20px;content: "我是提示文字撒";border: 1px solid;background-color: black;color: white;position: absolute; /*绝对定位 */left: 10px;top: 30px;border-radius: 5px 5px;}</style>
</head>
<body><div class="all"><p>昂，你来晚了哈</p></div>
</body>
</html>