写在前面
作为一个前端初学者，最近研究float和position，感觉好像发现了新大陆，之前对float做了一次总结，现在再给position做一个总结。因为float和position:absolute、position:fixed都会使元素脱离文档流，滥用也许会导致一些未知的效果。特别对于初学者来说，养成习惯尤为重要，有时候遇到不能理解的事情，觉得随手一个定位肯定能解决，但是又怕会有什么后续影响而不敢使用,畏手畏脚。所以这里稍微进行了总结，如有漏缺，望读者指出。
什么是定位（position）？
定义和用法
position 属性规定元素的定位类型。
可能的值
| 值 | 描述 |
|---|---|
absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 left, top, right以及 bottom属性进行规定。 |
fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right以及 bottom属性进行规定。 |
relative |
生成相对定位的元素，相对于其正常位置进行定位。因此，left:20;会向元素的 LEFT 位置添加 20 像素。 |
static |
默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者z-index 声明）。 |
inherit |
规定应该从父元素继承 position 属性的值。 |
其中，position:static是默认值，position:inherit属性用的比较少也暂且不提，这里主要说一下position:relative、position:absolute和position:fixed三个属性。
相对定位（position:relative）
给元素设置了相对定位后会激活四个属性：
leftrighttopbottom
这四个属性在未激活时也可以设置，但是没有任何效果。
给予了相对定位的元素不会脱离文档流，元素会带有自己本身的性质，在未设置left、right、top、 bottom属性时对元素本身没有任何影响。在文本流中，任何元素都被限制了自己本身的位置。而我们可以通过 CSS 去改变元素本身的位置，可以通过 margin或者float来给元素实现位移，但那不算是真正的位移。真正的位移则是通过定义四元素用来控制元素相对于自己本身位置的偏移量。
实验代码如下：
HTML
<div class="div_1 div_common"></div>
<div class="div_2 div_common"></div>
<div class="div_3 div_common"></div>
CSS
.div_common{
width: 100px;
height: 100px;
}
.div_1{
background: red;
}
.div_2{
background: pink;
position: relative;
top: 10px;
left: 10px;
}
.div_3{
background: blue;
}
效果图：
效果图
可以看见，给予了相对定位的元素，并没有影响它周围的元素，因为元素本身并未脱离文档流，所以元素本身的位置得以保留。需要注意的是，哪怕给予位移的值过大，看似让元素脱离了文档流，其实元素依然在文档流的中，依然留在于原来的位置，这样会在原位出现一片空白。定位的原点会以块元素左上的原点进行定位，所有的位移计算都将以这个点作为基础来进行元素的推动。
绝对定位（position：absolute）
对象会从文档流中脱离，不但会激活left、right、top、 bottom四个属性以外，还会激活z-index属性，可以通过z-index设置元素的层级（默认层级为0）。
注意点：
- 绝对定位会选取其最近一个设有定位的父级对象进行绝对定位，如果对象的父级没有设置定位属性，
position:absolute元素将以body坐标原点进行定位。 - 绝对定位一般配合相对定位一起使用。因为分辨率或窗口大小一旦改变，绝对定位的元素就有可能会移动位置影响设计效果，毕竟开发者无法确定所有人的分辨率都和开发时制作页面使用的分辨率是一样的。
- 一般情况为了消除绝对定位带来的影响，都会给父级元素设置一个相对定位（
relative），但是注意，是给父级设置，虽然说给上上级或者上上上级设置也可以，但是可能会存在不必要的影响，最好就是直接给父级设置。 - 绝对定位会使元素完全脱离文档流（比浮动元素的层级又高了半级）。
- 会使内联元素重新支持宽高
- 可以由内容（浮动元素）撑起宽高
- 给元素设置相对定位绝对定位都可以清除子元素的浮动。
z-index
定义和用法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
可能的值
| 值 | 描述 |
|---|---|
auto |
默认。堆叠顺序与父元素相等。 |
number |
设置元素的堆叠顺序。 |
inherit |
规定应该从父元素继承 z-index 属性的值。 |
注意：
- 此属性仅仅作用于
position属性值不为static的对象。 - 带有定位属性的元素层级默认会比未带定位属性的元素层级高（包括相对定位）。
- 较大
number值的对象会覆盖在较小number值的对象之上。如果定位对象的此属性具有同样的number值，那么将依据它们在HTML文档中声明的顺序层叠。 -
z-index可以设置负数，但是一旦设置负数，会被默认层级的元素盖住，就算容器内只有绝对定位元素，也将无法设置点击事件，所以慎用负数。 - 父级元素是永远无法放在子级元素之上的。
- 不同父元素的两个子级进行层级的对比，比较的层级为带有定位属性的父元素的
z-index : number值的大小。
固定定位（position：fixed）
性质几乎跟绝对定位一样。唯一的差别在于参考于整个浏览器（屏幕）进行定位。使用固定定位会使元素固定在浏览器的某个地方。但是日常使用比较少。
另：IE 6不支持固定定位。
什么时候该用浮动？什么时候该用定位？
我有前端朋友告诉我，对于初学者来说，能用浮动就尽量不要用定位。然而这激起了笔者的好奇心，那什么时候用浮动，什么时候用定位呢？
其实，两者都是按照需求使用。浮动只需要注意清除浮动，如果开发时需要考虑兼容性问题就多加考虑 IE 6 的双边距等兼容性。而使用绝对定位时记得给父级元素添加relative属性限制住绝对定位属性，并不会造成太大的影响。
这里需要引入一些常用布局的方式：
1. 普通布局
顾名思义，也叫自然布局，主要是依照元素本身的特性，从左到右，从上到下的进行布局。
2. 浮动布局
相对于普通布局，该布局元素会脱离普通布局也是流布局，相当于浮动元素会在普通布局之上进行界面的布局。可能会导致的问题就是会有普通布局的部分被浮动布局元素给遮挡，解决办法为清除浮动。浮动布局中浮动的范围是根据父元素的位置进行浮动位置定位。
3. 绝对布局
常用的position为absolute时的元素会进行绝对布局。一般会将参考位置元素设置为 position：relative来进行布局。
除此之外还有固定布局、页面自适应布局等布局方式，因与本文无关所以不多加赘述。
通过比较我们可以发现，float比position更适合用来做网页的布局，因为如果使用position来进行布局，就需要为页面上每一个元素来设置 xy 坐标来进行定位，然后最后对不同分辨率的显示器显示效果还不尽人意。而float就显得比较灵活。很多网页都可以使用float来进行整体布局。但是在有些地方，使用 relative和absolute布局可以实现更好的效果。
网友评论