切图仔基础篇————如何熟练的使用定位

前言：

在平常的工做中，咱们也许会遇到极为苛刻的还原要求——————好比所谓的偏差不超过1个像素。

做为前端开发人员，对于这种所谓1px的偏差。。。怎么说呢，1px已是屏幕最低分辨率了，怎么可能还有更低的偏差呢，这分明是扯淡。

不过，有些事确定是要追求极致的。为了追求极为细致的页面还原，position定位属性是必不可少的学习。

position的属性值

提到position的属性值，就要先说明一点。在CSS的样式编写中，你要养成一个特殊的顺序习惯：上右下左。

这对于页面样式的简写有帮助。

而后就是坐标的创建：以左上角为原点，向右为X轴正半轴，向下为Y轴正半轴。

二者结合，坐标的创建。

position的值能够设为relative，absolute，fixed，static。

接下来以这段代码做为实例，进行演示。

1 <div class="box">
2     <div class="box1"></div>
3 </div>
复制代码

0,默认定位：

不会让div或者其余元素脱离文档流，而是遵循排版的原则，从上到下，块级元素换行，行内元素不换行等等通用原则。因此，若是不用定位属性，那么这个position就不用设置。

1,相对定位：

相对于元素本来的位置进行位移，本来的位置不为空，仍然已经位移的该元素继续占用

1 .box {
2     width: 50px;
3     height: 50px;
4     position: relative;
5     top: 50px;
6     left: 10px;
7 }
复制代码

以上代码将实现将box以box最初的位置向右移动50px，向下移动10px。

2.绝对定位：

相对于元素的父元素最左上角进行坐标定位，会脱离文档流，产生相似浮动的效果

1 .box1 {
2     width: 10px;
3     height: 20px;
4     position: absolute;
5     top: 10px;
6     left: 10px;
7 }
复制代码

以上代码将实现将box1的位置以当前的视口位置的原点为基准位置进行移动相应得距离；

这里要注意如下两点：

1，若是父元素没有设置定位的话，那么，绝对定位是相对于body标签进行定位的。

2，若是父元素设置了相对定位，绝对定位，固定定位，任意一种，那么，绝对定位相对于父元素左上角进行定位。

3，总结一下，定位是相对于父元素进行定位的，若是父元素没有设置定位属性，则相对于BODY标签进行定位。

3.固定定位：

相对于当前窗口最左上角进行坐标定位

1 .box {
2     width: 50px;
3     height: 50px;
4     position: fixed;
5     top: 20px;
6     left: 0px;
7 }
复制代码

以上代码将会将box固定在视窗的距离顶部20px的左侧边缘位置。

定位使用经验

绝对定位会形成元素脱离了文档流，这时会产生元素堆叠的状况。此时能够配合z-index的属性，
如同PS排列图层同样，对页面的层级进行排序。

父元素相对定位，子元素绝对定位，是用来完美还原页面的一种手段，通常用来还原一些较为小的组件。

定位属性虽然强力，可是最好不要用来作总体的页面布局，容易形成页面错乱。
复制代码

参考连接1：www.cnblogs.com/lianshoulug…

结语：

以上连接，我看过，很不错的笔记，我稍微整理了一下我我的以为有用的部分，虽然说可能还不够详细，可是已经够了解这个属性的意思了。

抓住了属性的本质，便不会被各类变化所困扰。

最后的最后：欢迎指出不足，来打脸。