1-4：定位、z-index

相对定位

position:relative;  // 让元素相对自己原来的位置，进行位置微调。

特点：

• 相对定位不脱标，不脱离标准文档流
• 原本位置会一直存在，不会被其他盒子占据

作用：

• 微调元素
• 做绝对定位的参考，子绝父相

top：100px-------意思为离上面的距离增加100px，就是向下移动了100px。（相对移动）

top:-200px; 等于 bottom:200px;

绝对定位

position:absolute; 

参考点是浏览器首屏页面的四边（页面为参考点）

• 绝对定位脱标。所以所有标准文档流的性质，绝对定位都不遵守
• 绝对定位之后，标签不区分行内和块级元素，不需要display:block; 就可以设置宽高了
• 一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素为参考点（子绝父相）

//  要听最近的已经定位的祖先元素，不一定是父亲，也可能是爷爷

• 不一定是相对定位，任何定位都可以作为参考点，不过页面不稳固，没有用途，所以用 “子绝父相”。
• 绝对定位的儿子，无视参考的那个盒子的padding，在父亲border内测作为参考点：

Q：为什么要子绝父相？（面试题）

A：父亲占位子（相对），儿子随便飘（绝对） // 好处：不占位置，随便飘

绝对位置的盒子居中：绝对定位之后就不是标准流了，所以不能用margin: 0 auto;，应该用：

固定定位

position:fixed;

相对于浏览器窗口定位，无论页面怎么滚动，盒子显示位置不变

作用：返回顶部按钮、导航栏

特点：固定定位会脱离标准文字流

z-index

所属值表示谁压着谁，数值大的压住数值小的。

• 只要定位了的元素，才有z-index值。不管相对、绝对还是固定定位都可以使用z-index值。而浮动的东西不能用。
• z-index值没有单位，就是一个正整数。默认值为0
• 如果没有z-index值，或值相等，那么谁写在后面，谁就在上面压住前面的。定位了的元素，永远能够压住没有定位的元素。
• 从父想象：父亲怂了，儿子再牛逼也没用

加入div下面有多个span标签，但是每一个span标签属性不相同，以下表示div下的第一个span标签：