1、why要需要定位？

我们知道，使用 float浮动效果 能够实现块级盒子在一行内排列显示，但是如果想要盒子能在某个盒子中自由移动，或者固定住，需要使用定位。

2、定位模式

（1）static 默认的静态定位
静态定位其实就是按照标准流的方式进行布局排列，它没有边偏移。使用方法：

div {
    
    
	position: static;
}

（2）relative 相对定位
相对定位 占有原来的位置 [不脱离标准流]，它是相对于自身位置进行移动，可以设置边偏移：top right bottom left等

选择器 {
    
    
	position: relative;
}

（3）absolute 绝对定位
绝对定位不再占有原来的位置 [脱离标准流]，它移动位置时是以 有定位的父级元素为标准的，如果它上面的祖先元素都没有定位，则以浏览器为准[document文档]

选择器 {
    
    
	position: absolute;
}

注意：一般情况下，需要给父级盒子设置相对定位（需要占有位置），给子盒子设置绝对定位（进行自由布局排列），子绝父相

（4）fixed 固定定位
固定定位不占有位置 [脱离标准流]，它是 以浏览器的可视窗口为参考点移动元素位置的，它主要的用途是将元素固定在浏览器的可视区域。

选择器 {
    
    
	position: fixed;
}

（5）sticky 粘性定位
粘性定位可以看作 相对定位和固定定位的混合模式。粘性定位是 以浏览器的可视窗口为参考标准的，并且粘性定位占有位置，不脱标，通常跟页面滚动搭配使用。 [兼容性较差]

选择器 {
    
    
	position: sticky;
}

拓展：
1、定位的叠放次序：z-index属性
在使用定位时，如果发现定位元素不显示，可以提高元素的层叠次序，使用如下：

选择器 {
    
    
	z-index: 5; //注意：不要加单位呀
}

2、绝对定位、固定定位和浮动的些许不同：
（1）绝对定位[absolute]、固定定位[fixed]会完全压住下面标准流的所有内容
（2）浮动会压住下面标准流的盒子，但是不会压住文字内容，可以做文字环绕的效果

3、标准流、浮动、定位
（1）标准流：让盒子上下排列或者左右排列，标准布局
（2）浮动：让块级盒子一行内排列显示，或者左右对齐盒子[float: right]
（3）定位：让元素在某个盒子内自由移动