71讲 固定定位
固定定位与上一讲的绝对定位很相似，不同点是：
- 固定定位永远是浏览器窗口左上角
- 不会随着滚轴滚动，常用来做广告
72讲 元素的层级
相对定位没有脱离文档流，但是会灵魂出窍进行元素遮盖。绝对定位脱离了文档流，也能实现遮盖。另外float也会脱离文档流实现某种意义上的遮盖。当这三个遇到一块会出现什么情况？
层级z-index
- 只有设置了position才可以使用
z-index(position:static除外)进行层级的设置，默认层级是0
- 父元素的层级再高也不会盖住子元素
<html>
<head>
<title>层级</title>
<meta charset="utf-8" />
</head>
<style>
.father{
width:200px;
height:200px;
background:yellow;
position: relative;
z-index:999;
}
.son{
width:100px;
height:100px;
background:purple;
position: absolute;
z-index:1;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
关于float层级
div1绝对定位会脱离文档流position:absolute，那么此时我设置div2为float:left会出现什么效果呢？发现设置了position:absolute后也会把float进行遮盖，并不会出现两个元素水平排列
<html>
<head>
<title>导航条</title>
<meta charset="utf-8" />
</head>
<style>
*{
margin:0px;
padding:0px;
}
.div1{
width:200px;
height:200px;
background:yellow;
position: absolute;
left:50px;
}
.div2{
width:300px;
height:300px;
background:purple;
float:left;
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
遮盖与总结
如果要实现遮盖效果 position:absolute，应该是首先会想到的
设置了position属性后会有专属的属性出现:left top bottom right z-index其他元素不可以使用~~!
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。