8.position定位

代码已上传，可以免费下载

CSS文档流

CSS 有三种基本的定位机制：普通流、浮动流、定位流。

POSTION

position定位属性，检索或设置对象的定位方式

第一步：怎么通知html的元素进行位置的变化
属性：position:; 定位属性
作用：检索或者设置元素的定位方式

第二步：确定参照物
position的属性值们

第三步：坐标
left:;
right:;
top:;
bottom:;

position属性

static	默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static元素会忽略任何 top、bottom、left或 right 声明）
absolute	相对于已经定位父级元素、的绝对定位，浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定“left”、“top”、“right” 以及 “bottom”属性。若父级都没有定位，则以html（根元素）。(层叠的顺序z-index:value)
relative	是相对于默认位置的相对定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流，占据空间】）
fixed	相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 “left”、“top”、“right” 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。
sticky	可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。

怎么让一个元素在浏览器窗口左右上下居中？
第一个方法：
position:fixed;
left:50%;
height:50%;
margin-left:-宽度一半;
margin-top:-高度一半;

第二种方法：
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;

包含块的设置(子绝父相)：
子元素在父元素里面做定位，
父元素添加 position:relative；形成参照物
子元素添加position:absolute;移动位置

定位元素的层次关系：
z-index:; z-index的默认值 auto
数值越大，层次关系越高。能接收负数
定位元素得层次关系，和html结构书写顺序有关，后写得在层次顺序比较高。
其它:
1.如果一个元素添加了position:absolute;
margin:0 auto; 还有浮动 不起作用
2：相对定位position:relative; 不会对浮动、margin:0 auto； 造成影响。