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

前言：

在日常的工作中，我们也许会遇到极为苛刻的还原要求——————比如所谓的误差不超过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…

结语：

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

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

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