一、元素定位
- 定位属性
position | 定位方式，取值为static（默认值，标准文档流）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位） |
偏移属性，与包含块之间的偏移 | top、bottom、left、right，取值为正向里移，负值外移 |
z-index | 元素的堆叠属性，值大的覆盖值小的，默认值0 |
包含块：是指离该元素最近的按relative、absolute、fixed定位的祖先元素（不一定是父元素）的元素框。若没有，默认为body窗口。
- 四种定位
static | 文档流形式，忽略偏移属性 |
relative | 相对于自己定位，相对于原位置偏移。不脱标，原位置仍保留。 |
absolute | 以top，bottom描述参考点，或离自己最近的定位元素框，脱离标准流 |
fixed | 与绝对定位类似，但包含块是浏览器窗口。可以将元素固定在特定位置 |
- relative
- absolute
absolute中的参考点
- 若用top描述，则参考点，是页面的左上角
2.用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角：
3.以盒子为参考点：
A、找离自己最近的拥有定位属性的元素。
<div> → 绝对定位
<p></p> → 绝对定位，将以div作为参考点。因为父亲定位了。
</div>
不一定是相对定位，任何定位，都可以作为参考点。但是，实际开发中如果子绝、父绝，两个都脱离文档流了，页面就不稳固，没有任何实战用途。实际开发中，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动。
<div class=”box1”> → 绝对定位
<div class=”box2”> → 相对定位
<div class=”box3”> → 没有定位
<p></p> → 绝对定位，以box2为参考定位。
</div> /*所有说，要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷，爷爷的爷爷，等等*/
</div>
</div>B、从父亲内容区开始。个人理解，其实绝对定位的元素，和普通元素初始化时是一样排列的（块级元素独占一行，行级元素并排），只是绝对定位元素有一个特性脱离文档流，可以通过top、right、bottom、left，设置偏移。
绝对定位盒子的居中：
前面也提到过：left：50%，margin-left：width/2;
fixed
IE6不兼容
- 以浏览器窗口，做参考
- 页面如何滚动，这个盒子显示的位置不变
- 固定定位脱标
z-index
● z-index值表示谁压着谁。数值大的压盖住数值小的。
● 只有定位元素，才有z-index值。
● z-index值没有单位，就是一个正整数。默认的z-index值是0。可以为负数
● 如果大家都没有z-index值，或者z-index值一样，看标签的位置，靠后的压住靠前的。定位的元素，永远能够压住没有定位的元素。
● 从父现象
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权力的游戏</title>
<style>
body {
padding: 0;
margin: 0;
}
.div1,
.div2 {
width: 200px;
height: 200px;
}
.div3,
.div4 {
width: 100px;
height: 100px;
}
.div1 {
position: absolute;
z-index: 20;
background-color: red;
}
.div2 {
position: absolute;
top: 200px;
z-index: 10;
background-color: teal;
}
.div3 {
background-color: #c0c0c0;
position: absolute;
left: 300px;
top: 150px;
}
.div4 {
background-color: pink;
position: absolute;
left: 300px;
z-index: 100;
}
</style>
</head>
<body>
<div class="div1">
<div class="div3"></div>
</div>
<div class="div2">
<div class="div4"></div>
</div>
</body>
</html>
