position是啥？
- 定义：指定了元素的定位类型，是元素的定位机制，用于指定一个元素在文档中的定位方式，结合top、left、bottom、right属性，决定该元素的最终位置;
- 定位可以让盒子自由地在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
1.position的取值：
static/relative/absolute/fixed，其中static和relative会占据文档流空间，会相对它在正常流中的默认位置进行偏移；absolute/fixed则会生成一个块级框，但绝对不是浮动，没有外边距合并，会脱离文档流； 对应4种取值：
-
absolute：绝对定位，脱离文档流，相对于除static定位以外的第一个父元素进行定位；可以设置外边距，且不会与其他边距合并； 现象：（脱离了标准文档流，不占页面中的位置）；层级提高，做网页压盖效果；
-
fixed：绝对定位（固定定位），相对于浏览器窗口进行定位；元素的位置在屏幕滚动时不会发生改变；可以创建固定的有宽高元素的网页效果，比如固定导航栏，回到顶部按钮，小广告等。（脱标，可以看作一种特殊的绝对定位）
-
relative：相对定位，相对于自己原来的位置进行定位；元素先放置在没添加定位时的位置，在不改变页面布局的前提下调整元素位置。（不脱标，继续保留原来位置）
-
static:静态定位按照标准流特性摆放位置，没有边偏移，在布局时很少用。 static：默认值，没有定位，元素出现在正常的流中；此时top,left,right,bottom和z-index无效；
-
sticky:粘性定位，被认为是相对定位与固定定位的结合。以浏览器可视窗口为参照点移动元素(固定定位特点)； 占有原先的位置(相对定位特点),必须添加四个方位之一才有效。兼容性较差。 元素使用top, bottom, right, left四个属性进行定位，需要先设定position属性，才能工作。
-
应用：实现固定定位盒子贴着版心右侧对齐的小算法：
- 让固定定位的盒子left:50%,走到浏览器可视区(版心)的一半位置；
- 让固定定位的盒子(margin-left:版心宽度的一半距离),多走版心宽度的一半位置。
2. position的练习：
（1）下拉列表练习 （2）两张图片错开效果 （3）图片上面定位文字 （4）元素从下面出来效果 （5）照片墙
3. 定位叠放次序
控制盒子的前后次序(Z轴)，只有定位的盒子才有z-index属性。
- z-index：仅能在定位元素上有效，该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。
- z-index为正数时，表示里用户更近，为负数表示离用户更远。
4. 定位的拓展
-
绝对定位的盒子居中，不能通过margin: auto设置； （1）水平居中：left:50%（让盒子左侧移动到父级元素的水平中心位置）；margin-left:-100px(让盒子向左移动自身宽度的一半)； （2）垂直居中：top:50%（让盒子的左侧移动到父级元素的垂直中心位置）；margin-top:-100px（让盒子向上移动到自身高度的一半）
-
定位特殊性 （1）absolute，fixed与float类似； （2）inline元素添加absolute或者fixed，可以直接设置width，height； （3）block元素添加absolute或者fixed，若不能直接给width或者height，默认大小为内容大小；
-
脱标的盒子不会触发外边距塌陷. float,absolute（fixed）的元素都不会出发外边距合并的问题。
-
absolute（fixed）会压住盒子,会压住下面标准流盒子里面所有内容；浮动元素指挥压住它下面标准流的盒子，但不会压住下面标准流盒子里面的文字(图片)；
-
若一个盒子既有left又有right属性，会默认执行left，同理，执行top。
