使用定位的原因：让盒子自由的在某个盒子内移动的位置或者固定在屏幕中的某个位置，并且可以压住其他盒子。

一、定位组成

1.定位：定位模式 + 边偏移

2.定位模式

3.边偏移

定位盒子移动到的最终位置，有top、bottom、left、right4个属性，即距离上下左右边线的距离。

二、四种定位

1.静态定位static（了解）

默认定位方式，无定位的意思。静态定位按照标准流特性摆放位置，没有边偏移。

语法：

选择器{ position: static; }

2.相对定位relative（重要）

（1）它相对于自己原来的位置来移动的。

（2）不脱标，继续保留原来位置。

3.绝对定位absolute（重要）

（1）如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。

（2）如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先为准。

（3）绝对定位脱离原来的位置（脱标），可以随意摆放位置。

（4）子级是绝对定位的话，父级要用相对定位。因为子盒子不需要占有位置，则是绝对定位。

4.固定定位fixed（重要）

（1）以浏览器的可视窗口为参照点移动元素。

（2）不占有原来的位置（脱标）。 

5.粘性定位sticky（了解）

IE不支持。

（1）以浏览器可视窗口为参照点移动元素。

（2）占有原来位置（不脱标）。

（3）必须添加top、left、right、bottom其中一个才有效。

6.定位的叠放次序

出现盒子重叠的情况，可以使用z-index来控制盒子的前后次序。

语法：

选择器{  z-index: 1;  }

数值可以是正数，可以是负数，默认为auto。数值越大越靠上。

如果属性值相同，则按照书写顺序，后来居上。

数字后面不能加单位。

只有定位的盒子才有z-index属性。

三、定位的扩展

1.绝对定位的盒子居中

加了绝对定位的盒子不能通过margin: auto水平居中。

（1）left; 50%：让盒子的左侧移动到父级元素的水平中心位置。

（2）margin-left:-xxx px：margin负值，让盒子向左移动自身宽度的一半。

2.定位的特殊特性

（1）行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度。

（2）块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认为内容的大小。

（3）脱标的盒子不会触发外边距塌陷

（4）绝对定位（固定定位）会完全压住盒子。

浮动元素只会压住它下面标准流的盒子，但不会压住标准流盒子里面的文字（图片）。浮动最初目的是做环绕效果。

但绝对定位（固定定位）会压住下面标准所有的内容。

四、元素的显示与隐藏

1.display属性

（1）display: none：隐藏对象，且元素不再占有原来的位置。

（2）display: block：除了转换为块内元素外，同时还有显示元素的意思。

2.visiblity可见性

（1）visibility: visible：元素可视。

（2）visibility: hidden：元素隐藏。元素隐藏后继续占有原来位置。

3.overflow溢出

（1）visible：不剪切内容也不添加滚动条。

（2）hidden：不显示超过对象尺寸的内容。

（3）scroll：不管内容是否超出，都显示滚动条。

（4）auto：超出自动显示滚动条，不超出不显示。

定位具体参考：CSS Position(定位) | 菜鸟教程 (runoob.com)