position的相关属性&微重点（父相子绝）(版心定位广告)

position

定位一共有五个值：分别是：

1. static 是静态定位,也就是标准流，默认情况（因为这个属性的效果与标准流的效果是一样的）；
2. relative是相对定位，这个属性常常与绝对定位连用，并且作为绝对定位的父亲出现。（特点：不会脱标，也就是说即使改变了他的位置，没改变位置之前的位置是会保留的）；
3. absolute是绝对定位，这个属性于上面的属性连用，如果给某标签设置了此属性，那么这个标签就会相对relative的标签移动，如果没有相对定位，那么绝对定位相对的就是body的位置。（特点：会脱离标准流）；
4. fixed是固定定位，这个属性用于固定某些标签的，放在左边的侧边栏或者右边的侧边栏，或者插入广告，非常方便，（特点:这个属性会脱离标准流，不保留原来位置）
5. sticky是粘性定位，这个属性适用于黏贴一个位置，然后拉取进度条，到设置的top值以后，他就会固定在那个位置。（特点：这个属性会脱离标准流，不保留原来的位置）

静态定位就不说了和标准流差不多；

父相自绝什么意思？怎么用呢？

假设有两个盒子，大盒子包裹小盒子，大盒字设置relative相对定位，小盒子absolute绝对定位，设置以后，目的是为了让小盒子能在大盒子随意转移位置。可以设置他的top,bottom,left,right值，改变其小盒子的位置，小盒子默认的位置是父盒子的左上角。非常好用，随意调节。

固定定位：

固定定位的用法：position：fixed；让一个盒子固定在浏览器某一位置，通过改变他的top,bottom,left,right值实现位置的固定。比如嵌入广告，侧边栏等等。不会随着浏览器页面向下滚动而滚动。
怎么使用呢？：
举个栗子：假如一个页面版心为百分之70%，你想实现一个盒子放在版心的右侧下方，怎么实现呢？很简单，你把盒子居中设置left=50%，然后再向右边移动版心一半的距离，这样这个盒子就贴着版心了，正常情况下都要在往右边移动个20px，这样好看。

position:sticky;粘性定位;

粘性定位，粘性定位是固定在某个位置，然后设置他的定位，当浏览器滚动到设置的定位的位置时就不会再移动了。假如给一个盒子设置了top值为0；当盒子随着页面向上滚动，由于top为0；所以这个盒子移动到页面的顶部就会停止，即使页面继续向上移动，他的位置也不在次改变。

说点儿别的：
怎么实现一个盒子贴着版心固定呢？也是很简单的，需要两个步骤，第一个步骤先让盒子移动到中央也就是他的left值设置成50%,设置以后盒子此时就走到页面中央，也就是版心中央了，之后怎么做呢？再利用margin-left:版心一半的宽度即可；此时这个盒子就贴着版心的右边了，随着浏览器移动，版心移动，他贴着版心不动。 现实中的一些例子：二维码广告等

总结：最重要的要掌握父相子绝，以及固定定位，这三个是非常重要的；另外粘性定位也是很重要，不过后期是与javascript连用的，所以暂时知道实现的效果就行。

tips: 1.固定定位的盒子 ：得给他设置宽度,2.定位，浮动以后的盒子自己就变成行内块了