前言:
在日常的工作中,我们也许会遇到极为苛刻的还原要求——————比如所谓的误差不超过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…
结语:
以上链接,我看过,很不错的笔记,我稍微整理了一下我个人觉得有用的部分,虽说可能还不够详细,但是已经够了解这个属性的意思了。
抓住了属性的本质,便不会被各种变化所困扰。
最后的最后:欢迎指出不足,来打脸。