一. why 定位？
position 属性可以用来设置元素在页面中的位置，通过该属性可以把任何属性放置在任何您认为合适的位置。
| 值 | 语义 | 相对于 | 是否脱标 |
|---|---|---|---|
| static | 静态定位 | / | 不脱 |
| relative | 相对定位 | 自己（自恋型） | 不脱 |
| absolute | 绝对定位（可以在某个盒子里自由移动） | 第一个position不为static的父元素，没有就浏览器 | 脱 |
| fixed | 固定定位 | 浏览器窗口 | 脱 |
| sticky | 粘性定位 （页面滚动到某个位置开始固定定位） | 浏览器窗口 | 不脱 |
二. 五种定位方法
<1> 静态定位 static 不脱标
static是 position 属性的默认值，表示没有定位，使用静态定位的元素会按照元素正常的位置显示，并且不会受到 top、bottom、left、right 和 z-index 属性的影响。
<2> 相对定位 relative 自恋型 不脱标
relative相对于自己默认的位置来进行位置上的调整，可以通过 top、bottom、left 和 right 四个属性的组合来设置元素相对于自己原来的默认位置在不同方向上的偏移量。
- 不脱标准流。虽然它走了，但它原来的位置继续保留，其他元素的位置不会受该元素的影响发生位置改变来弥补它移动剩下的空隙。
<3> 绝对定位 absolute 脱标
absolute相对于第一个非静态定位（static）的父级元素进行定位，如果找不到符合条件的父级元素则会相对于浏览器窗口来进行定位。
-
绝对定位不占有原来的位置，下面的盒子就会升上去占领。
-
绝对定位的元素可以有外边距，并且外边距不会与其它元素的外边距发生重叠。（因为脱离了文档流，相当于开启了BFC）
注意：
-
绝对（固定）定位会完全压住盒子。（即盒子里的图片文字都会压住）
-
浮动元素不会，比如给上面一个元素加了浮动，则下面的标准流会升上去，浮动会只压住下面标准流的盒子，但不会压住盒子里面的文字或图片。
因为浮动最初是用来让文字环绕图片的！！！！，如下：
浮动
absolute
<4> 固定定位 fixed 脱标
fixed相对于浏览器窗口进行定位，使用固定定位的元素不会因为浏览器窗口的滚动而移动，就像是固定在了页面上一样，我们经常在网页上看到的返回顶部按钮就是使用固定定位实现的。
<5> 粘性定位 sticky 不脱标
sticky以浏览器的可视窗口为参照移动元素。当滚动页面时它的效果与相对定位相同，当元素滚动到一定程度时**（滚动到它设置的相对于浏览器窗口的位置时），它又会呈现出固定定位的效果**。比如一些网页上的导航菜单，当页面加载完成时它在自己默认的位置，当我们向下滚动页面时它又会固定在页面的最顶端。
- 必须加top、left、right、bottom其中一个才有效。【即距离浏览器的距离为top： px时就不动了，变为固定元素
三. 定位叠放次序
用定位布局时，可能出现盒子重叠的情况。此时，可以用z-index来控制盒子的前后次序
语法:
选择器{
z-index : 1; 【只有定位才能用】
}
数值可以是整数，负整数或0，数值越大，盒子越靠上。【不能加单位】
如果属性相同，按照书写顺序，后来者居上。
