简述

　　如果我们想让盒子自由地在某个盒子内移动位置或者固定在屏幕中的某个位置并且压住盒子的话，我们就需要定位了。

　　定位的本质也还是摆盒子，只不过按照定位的方式摆盒子。

　　定位 = 定位模式 + 边偏移

定位模式

　　定位模式决定了元素的定位方式，通过CSS的position属性值设置，值可以分为四个：

　　边偏移就是定位盒子移动到最终位置，有top、bottom、left和right4个属性。

　　静态定位是元素的默认定位方式，无定位的意思。

　　语法：选择器 { posititon: static; }

　　静态定位按标准流的方式拜访位置，没有边偏移，故很少使用到。

　　相对定位是元素在移动位置的时候，是相对于它原来位置来说的

　　设置相对定位模式后，我们就可以通过边偏移来移动盒子的位置，偏移距离是参照盒子原本位置的

　　原来在标准流的位置继续占有，后面的盒子仍以标准流的方式对待它

　　绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

　　语法：选择器 { posititon: absolute; }

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

　　•如果祖先元素有定位，则以最近一级的有定位祖先元素为参考点移动位置

　　•绝对定位不再占有原先的位置(脱标)

　　子绝父相的意思是子级用绝对定位的话，父亲就要用相对定位。

　　子级用绝对定位，就不会占据位置，可以移动到父盒子的任意位置，不影响其他兄弟盒子。

　　因为子级用了绝对定位，那么父盒子一定就要加定位，限制子盒子在盒子里面。那么问题来了，父亲加什么定位呢？绝对定位还是相对定位，答案是相对定位，因为绝对定位是脱标的，会影响到父盒子下面的盒子。

　　固定定位是元素固定于浏览器可视区的位置，主要使用场景是：可以在浏览器滚动时元素的位置不会改变。

　　语法：选择器 { posititon: fixed; }

　　•以浏览器的可视窗口作为参照点移动元素，和父元素没有任何关系

　　•不随滚动条滚动，不占有原来的位置，也就是说脱标的

　　让固定盒子固定在版心右侧的小技巧：先left：50%走到浏览器可视区的一半，再加上margin-left：版心的一半距离，该固定盒子就跑到版心的右侧了

粘性定位　　

　　粘性定位其实就是相对定位和固定定位的结合

　　语法：选择器 { posititon: sticky; top: 10px;}

　　•以浏览器的可视窗口为参照点移动元素

　　•占有原先的位置

　　•必须添加上下左右之一的边偏移才能生效