前端----定位

1.定位

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

2.定位组成

定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：static静态定位、relative相对定位、absolute绝对定位、fixed固定定位。
边偏移就是定位的盒子移动到最终位置，有top、bottom、left、right 4个属性。例如：top：10px 描述：顶端偏移量，定义元素相当于其父元素上边线的距离。

3.静态定位

静态定位是元素的默认定位方式，无定位的意思。
语法：选择器{ position:static;}
静态定位按照标准流特性摆放位置，它没有边偏移。静态定位在布局时很少用到。

4.相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
语法：选择器{position：relative；}
它是相对于自己原来的位置来移动的。不脱标，继续保留原来位置。

5.绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
语法：{position：absolute；}
如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
如果祖先元素有定位，则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置（脱标）。

6.固定定位

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：选择器{position：fixed；}
以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系。不随滚动条滚动。
固定定位不再占有原先的位置（脱标），可看做特殊的绝对定位。