CSS定位（position）
html中三种布局方式
- 标准流 网页中默认的布局方式，即顺序布局
- 浮动
- 定位
标准流
是网页中的默认布局方式，即顺序布局
网页中元素分为两大类，即
- 块级元素
- 内联元素
position属性--定位
意义：
- position属性决定了元素将如何定位
- 通过top right bottom left来实现位置
position可选参数
- static
- relative
- absolute
- fixed
- inherit
static参数
position属性中的默认值，元素按照标准流的方式进行正常的排列
relative
相对定位，元素仍然处于正常的文档流中，但是可以通过top right bottom left对位置进行改变
举个栗子：
通过这个例子可以看出，红色区块相对于原有位置下降了100px，而蓝色区块相对于本身位置上升了50px，导致两个区块产生了重叠，正是由于这种情况的存在，所以产生了层级的概念，后定义元素层级高，会覆盖前一元素
关于top和left
absolute
绝对定位，配合top right bottom left使用，具有该属性的元素会脱离原本的文档流，可在整个网页中进行定位，具有层级的概念，后定义的元素层级高
举个栗子：
由网页结果可以看出，设置了position的红色区块已经脱离正常的文本流，浮于蓝色区块上方，并且由left等属性对其进行定位
当父元素的高度大于窗口页面高度时，其元素的定位仍旧从窗口的边界进行定位
绝对定位中位置属性也可设置为负值，负值结果则相对于正值的反方向进行移动
fixed
固定参数，配合top right bottom left使用，脱离了正常的标准流，不受标准流约束，在窗口进行移动定位，具有层级的概念，常用于对联广告，登录弹窗等
在页面中的定位是固定的，当页面高度大于页面窗口高度时，随着页面的滑动，该div的位置并不随之改变
其left等的值定义方式与上两种相同
当父元素与子元素同时设定了固定定位时，子元素的位置并不受父元素控制，而是仍旧根据网页窗口的四个顶点进行定位
fixed是固定定位，不受制与任何元素
inherit
继承属性，定义子元素可以继承父元素的部分属性
注意：
- 父元素一定要设置position属性，否则子元素无内容可以继承
- 当父元素设置position属性为fixed时，子元素不受父元素控制，因为fixed为固定定位，不受制于任何属性
关于定位属性
所有的定位属性都具有层级概念
后定义的元素层级高于先定义的元素
Z-index
设置元素的叠加顺序，但依赖定位属性
三个属性值：
- auto 默认属性，不产生左右
- number 设置层级大小，数字越大，层级越大
- inherit 继承
Z-index注意事项：
- Z-index大的元素会覆盖Z-index小的元素
- Z-index为auto的元素不参与层级比较
- Z-index为负值，，元素被普通流中的元素覆盖
z-index属性服务于position属性， 当position属性定义为static时，相当于没有定位属性，那么z-index属性也不具有意义
举个栗子：
由代码可以看出，后定义的蓝色区块层级应该比红色区块高，应浮于红色区块上方，但由于，未设置z-index属性的元素默认值为0，而给红色区块设置了z-index属性为1，使得红色区块层级高于蓝色，故网页中的显示结果应该红色浮于蓝色之上
无论设置position为何值，在其不设置层级关系的时候，其层级大小都是按照div顺序进行设定，后写的div层级大
所有元素层级受制于父元素，若父元素的兄弟元素层级比父元素小，那么即使父元素的子元素层级设置小于其兄弟元素，但都认为子元素层级高于父元素
position案例
position与盒子的区别
盒子模型：通过设置上下左右的内外边距来改变内容所显示的位置
登录界面
以下为代码:
在对登录小窗进行z剧中设置时，先将left和top设置为50%，使得登录窗口的左边距与上边距分别距离页面左和上边距为50%的距离，这并不能完全使得页面居中，故仍需将margin的left和top设置为负的半个页面宽高的距离，以此来达到目的
导航栏
在网页中，通常会用导航栏的设置，一般的，导航栏的位置随着页面的滑动而滑动，即固定在窗口的某一位置，所以在这里用到了position属性，并且为了页面布局的美观，还使用到了伪类进行子元素的隐藏
举个栗子：
在此段代码当中，首先设置列页面背景以及导航栏的位置属性，为了使导航栏固定，用到了position属性，其次，在对导航栏内容的设置时使用到了伪类以及display属性对子栏目进行隐藏，在三级标题时，为了页面美观，利用position属性的absolute属性使其移动到页面右边。
页面显示结果：
