- 当我们在进行页面布局的时候可能会遇到一种情况，某一个图片或icon 文字之类的需要放到特定的位置时候，margin和padding都不好使了，float也做不到了，那么此时我们该如何去实现它呢？
这时候就到了position（定位样式）该出场的时候了。
就比如下图中搜索框中的放大镜一样的图标，
1.jpg
那么该如何用呢？
别急，在用之前我们需要先了解一下它的属性：
1. position：static 默认，静态，⽆特殊定位 （这个不常用）
2. position：absolute 绝对定位（这个就很常用了） - 这个属性是给子元素使用的，也就是你想要移动的那个东西，通过调节上下左右（top/bottom/left/right）四个方向属性来使用
.icon {
position: absolute;
top: 27px;
right: 130px;
}
它是相对于具有定位属性的父元素来进行位移定位的,以⽗元素左上⾓为基准设置位置，如果⽗元素未设置 定位，则以浏览器左上⾓为基准
absolute可以通过z-index数值进行层叠定义，且不占空间位置
3. position：relative 相对定位（可以和absolute配合使用）
- 这个是给父元素使用的，当它没有子元素时是以⾃⾝的位置为基准设置位置，有子元素时则是子元素的定位的参照物，⼀般⼦元素设置相对定位，⽗元素设置绝对定位（⽗相⼦绝），且相对定位占用空间位置
那么我们再回过头来看看上面搜索框里放大镜该怎么对他进行定位
先引入icon图标，我使用了I标签来引入，
微信图片_20190613033340.png
**然后再给它设置样式属性（这里我就随便起个名字了）
.search {
.whb(820px, 108px, none);
.center;
position: relative;
img {
.whb(216px, 108px, none);
display: inline-block;
.f-l;
}
.sousuo {
position: absolute;
top: 27px;
right: 130px;
}
}
可以看见父元素为，search 给了它position: relative;，子元素是.sousuo 给了他position: absolute; 然后在通过调节top和right的值来控制图标位置
微信图片_20190613034347.png
如果我不调top和right的值呢，就让它们的值为0，会出现什么样的结果呢，可以看下图
.sousuo {
position: absolute;
top: 0px;
right: 0px;
}
结果如下
微信图片_20190613034815.png
icon图标在右上角
4. position:fiexd 固定定位
- 相对于整个浏览器窗口定位，一直固定在那个位置，无论你怎么滑动网页，它依然坚挺的在那里岿然不动，最常见的就是网页侧边的广告栏，还有购物网站瞬间回到顶部的那个按钮。
本人学识有限 文章多有不足
若有错误 请大方指出 以免误导他人
