定位和多级导航
定位 ：（相对定位，绝对定位，固定定位）
定义：什么是定位：将指定元素摆放到页面的任意位置。（通过定位可以任意的摆放元素）通过position属性来定位元素的
1相对定位：
定义：当开启元素定位时（position的属性值是一个非static的值）（static值是默认值，无特殊定位）
这个时候，可以通过left、right、top、bottom四个属性来设置元素的偏移量。
| left | 元素相对于其定位位置的左侧偏移量 |
|---|---|
| right | 元素相对于其定位位置的右侧偏移量 |
| top | 元素相对于其定位位置的上侧偏移量 |
| bottom | 元素相对于其定位位置的下侧偏移量 |
相对定位的特点:
1.当开启元素的相对定位以后，如果不设置偏移量，元素不会发生任何变化。
2.相对定位是相对于元素在文档流中原来的位置进行定位的。
3.相对定位的元素不会脱落文档流。
4.相对定位会让元素提升一个层级。
练习：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>position:relatived的使用</title>
<style type="text/css">
*{margin:0 padding:0}
.box1,.box2,.box3,.box4{width:100px; height: 100px; background-color: #bfa; border: 1px solid red; }
.box2{ position:relative ; left:200px;top:-102px; }
.box3{ }
.box4{ position:relative;left:100px;top:-102px }
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>
小总结：相对定位其实比较简单，就是通过==position：relative;==稍微有难度的地方是偏移量的设置。这个时候需要我们建立坐标的概念。
2.绝对定位：
特点:
当position属性设置为absolute时，则开启了元素的绝对定位。
1.开启绝对定位，会使元素脱离文档流。
2.开启绝对定位以后，如果元素不设置偏移量，则元素的位置不会发生改变。
3.绝对定位会使元素提升一个层级。（移动后会在另一个图像是上面）
4.绝对定位是相当于离他最近的开启了定位的祖先元素进行定位的。如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。
练习：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style >
.box1{ height: 100px;width: 100px;border: 1px solid red;
position: relative;left;100px;top:100px;
}
.box2{ height: 200px;width: 300px;border: 1px solid red;
position: absolute;margin-left:0px;margin-top: 200px;
}
.box3{ height: 100px;width: 100px;border: 1px solid red;
position: absolute;left:200px;top:0px;
}
.box4{ height: 100px;width: 100px;border: 1px solid red;
position:relative; left:200px;top:0px
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2
<div class="box3">3</div>
</div>
<div class="box4">4</div>
</body>
</html>
3.固定定位：
特点：position : fixed;
当元素的position属性设置为fixed时候，则开启了元素的固定定位
固定定位也是一种绝对定位，它的大部分特点和绝对定位一样
不同的是：
固定定位永远是相对于浏览器窗口进行定位的
固定定位会固定在浏览器的某一个位置，不会随滚动条滚动。
高度塌陷问题：
解决一：
解决二
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
