css的定位

定位

• 概念：将一个元素放在指定的位置上，特指position。
• 语法：position：定位方式；
  left:数字px；或 right:数字px；
  top:数字px； ; 或 bottom：数字px；

定位方式

1、静态定位

static静态定位，它是默认值。

2、固定定位

fixed固定定位 ，基于浏览器当前屏进行定位（随浏览器窗口动，不会随内容滚动而滚动，会脱离文档流）。

3、相对定位

relative相对定位 ，基于元素本身的位置进行定位，（不会脱离文档流），会占据原来的位置。

4、绝对定位

absolute绝对定位 ，基于最近的被设置非静态定位的上级元素进行定位，如果没有，就是浏览器第一屏进行定位。（随浏览器内容滚动而滚动，会脱离文档流）
应用：子绝父相（子元素绝对定位，父元素相对定位）

补充：
“文档流是文档中可显示对象在排列时所占用的位置。文档流简述将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)”

面试题

问题：盒子完全居中于未知大小的盒子，怎么做？

方式一：
position: fixed;
top: 50%;
left: 50%;
margin-top: 负盒子高度的一半；
margin-left： 负盒子宽度的一半；

方式二：
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;