6.1 餐前小点
HTML中的三种布局方式
- 标准流
- 浮动
- 定位
HTML两大元素
- 块级元素（独占一行）
<div><h1~h6><ol><ul><li><p><table>等
- 内联元素（与相邻在一行排列）
<a><span><img><input>
6.2 position属性
作用：
- position属性决定了元素将如何定位
- 通过top、right、bottom、left实现位置
可选参数：
- static （默认）
- relative（以文档流中默认位置做坐标轴定位，处于正常文档流）
- absolute（以有position的父元素为准，要是父元素没有position，就以浏览器为父元素）
- fixed（以距离上下左右距离定位，固定在浏览器）
- inherit
relative
当设置position的left和top值时，以页面最左最顶点为原点，向右和向下为正方向移动
设置left和top的值
如下：
当设置position的right和bottom值时，以页面最左最顶点为原点，向左和向上为正方向移动
设置left和top的值
如下：
现在红色盒子可见部分只有原来1/4大小，即整个盒子向左向上移动了50px
这里说一下覆盖和层级的问题：
这里蓝色盒子覆盖掉红色盒子，所以后写的元素会覆盖先写的元素，后写的元素的层级大于先写的元素的层级。
当红色盒子的top值修改为0时
蓝色盒子仍然覆盖红色盒子显示，同时红色盒子上边缘以出现
absolute
会使<div>脱离文档流，HTML高度会变成0
脱离文档流后，可以与蓝色盒子覆盖显示
left 为 50px，top 为 50px，（坐标系原点在浏览器左上角，向右向下正方向）意为距离左边框50px，上边框50px
设置 right 和 bottom 值（坐标系原点在浏览器右下角，向左向上正方向）意为距离右边框和下边框的距离
效果：
absolute属性还有独立性较强的特点 例如将子元素用absolute定义，父元素位置不影响子元素的位置
蓝父元素盒子位置并不影响红色子元素位置
效果：
fixed
脱离正常文档流，固定于整个窗口定位，怎么上下翻都不动，拥有层级概念。常用于对联广告和登陆弹窗。不受制于任何元素。
同样fixed也使子元素脱离父元素，不受父元素定位影响
inherit
使子元素继承父元素的position属性
举几个栗子：
子元素继承父元素的absolute值
子元素继承父元素的fixed值
子元素继承父元素的relative值（左上角向左向下）
6.3 z-index属性
设置元素的叠加顺序，但依赖定位属性
- 默认层级为后写的大于先写的，默认值为0
- z-index大的元素会覆盖z-index小的元素
- z-index为auto的元素不参与层级比较
- z-index为负值时，元素被普通流的元素覆盖
只能控制设置了position的元素
举个例子
给下面的盒子设置了负外边距（上移）
覆盖了红色盒子
当给红色盒子设置z-index=1后
红色盒子的z-index大于普通元素，所以红色覆盖了蓝色
还有一种使用情况：
这里给灰色盒子的父元素（绿盒子）设置了较大的z-index值，他的灰盒子元素也跟随着大于了蓝色盒子，所以就把蓝色盒子覆盖了
简而言之，一人得道鸡犬升天，一个盒子的父元素z-index值够大，即使你再小也能压在别人上面。但是得相邻才行。
案例练习
二级折叠菜单
首先做到这个样子，把二级菜单放进来
切记要修改nav大盒子的高度为auto使盒子能伸展开
效果如下
开始操作：
给列表设置display:none属性，是之隐藏。再给装有“鼠标放这里”的盒子添加伪类hover：鼠标停止后变成块状元素的属性。为了使之美观，添加cursor:pointer属性让鼠标放在标题上会变成手的形状。
三级菜单
在二级菜单的基础上添加position属性增加美观度，给“你看”盒子添加了position:relative属性，再给“list3”盒子添加position:absolute属性（以父元素左上角为原点向右向下为正方向），最后给相应盒子添加伪类属性
即可完成三级菜单效果
