详解CSS position属性
position 是 CSS 中非常重要的一个属性，通过 position 属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。postion 也是初学者容易搞不清楚状况的一个属性，本文将从最基础的知识讲起，谈谈关于 positon 属性的一些理论与应用。
基础知识
postion 属性我们成为定位，它有 4 个不同类型的定位，这些类型会影响元素的生成方式，下面我们详细说明 position 属性。
position 四种类型
（1）static
static 是 position 属性的默认值，默认情况下，块级元素和行内元素按照各自的特性进行显示
（2）relative
relative 翻译成中文称相对定位，设置了这个属性后，元素会根据 top，left，bottom，right 进行偏移，关键点是它原本的空间仍然保留。我们看下面例子：
HTML 代码
1 <div class="relative"> 2 </div> 3 <div></div>
CSS 代码
1 div { background: #0094ff; width: 250px; height: 100px; } 2 .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }
效果图
在这个例子中，div.relative 相对定位，并且 left 设置为 20px，left 设置为 50px，其相对于父元素进行偏移，并且原本的空间也占据着，下面的元素并不会顶替上去。
（3）absolute
元素设置成 absolute 后会脱离文档流，并且不占有原本的空间，后面的元素会顶替上去，而且不论元素是行内元素还是块级元素，都会生成一个块级框，也就是例如行内元素 span 设置了 absolute 后就可以设置 height 和 width 属性了。看下面例子：
HTML 代码
1 <span class="absolute"> 2 </span> 3 <div></div>
CSS 代码
1 div { background: #0094ff; width: 250px; height: 100px; } 2 .absolute { background: #ff6a00; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }
效果图
如图所示，span 标签被设置成绝对定位，就可以设置 height 和 width 属性，而且不占有原本的空间，后面的 div 元素会顶替上去。
（4）fixed
fixed 的表现方式类似于 absolute，但是相比于 absolute 相对于不确定的父元素进行偏移，fixed 就是相对于浏览器窗口进行偏移
包含块
在详解 CSS float 属性中我们提到包含块这个概念。对于 position 属性也有包含块这个属性，它要分几种情况来讨论：
1. 根元素的包含块，根元素一般是 html 元素，有些浏览器会使用 body 作为根元素，大多数浏览器，初始包含块是一个视窗大小的矩形
2. 非根元素的包含块，如果该元素的 position 是 relative 或 static，它的包含块是最近的块级框，表的单元格或行内块的内容边界
我们举例进行说明，
HTML 代码
1 <div> 2 我是父级元素的内容 3 <div class="relative"> 4 相对定位元素 5 </div> 6 </div>
CSS 代码
div { background: #0094ff; width: 250px; height: 100px; } .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }
效果图
这是相对定位元素的包含块，为最近的块级框，表的单元格或行内块的内容边界，相对定位元素相对于其包含块进行偏移，我们可以简单理解为相对于其原来的位置进行偏移。
3. 非根元素的包含块，如果该元素的 position 是 absolute，则包含块为最近的 position 不是 static 的祖先元素。
简单来说，它的包含块会从父级元素一直向上查找，找到第一个 position 不是 static 的元素为止。
偏移属性
前面的例子中已经涉及到偏移属性，它指的是元素相对于其包含块的偏移，我们称其为偏移属性，分别是 top，bottom，left，right，依次代表上下左右。他们的值可以是具体的数值，也可以是百分比。如果是百分比，top 和 bottom 是相对于包含块高度的百分比，left 和 right 是相对于宽度的百分比。它们也可以设置负值，即有可能将元素移动到包含块的外边。
绝对定位
接下来我们了解一下绝对定位的详细细节。
基本的绝对定位
一个元素被设置为绝对定位时，会脱离文档流，然后相对其包含块进行偏移。
一般来说，我们会将一个元素设置为 relative 来作为 absolute 元素的包含块，我们看看下面的例子：
HTML 代码
1 <div class="absolute"> 2 相对于初始包含块定位 3 </div> 4 <br /> 5 <br /> 6 <br /> 7 <br /> 8 <br /> 9 <br /> 10 <div class="relative"> 11 <div class="absolute"> 12 相对于最近 relative 祖先元素定位 13 </div> 14 </div>
CSS 代码
1 div { background: #0094ff; width: 250px; height: 100px; } 2 .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; } 3 .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }
效果图
如图所示，有两个绝对定位元素，第一个元素没有 position 不是 static 的祖先元素，所以它的包含块是 body，根据 body 进行偏移，
第二个绝对定位元素设置了一个 relative 的父元素，它根据父元素进行偏移。
绝对定位的重叠问题
元素设置成绝对定位后会脱离文档流，并且失去占用的空间，而且如果偏移的位置接近，会造成重叠问题。看看下面的例子：
HTML 代码
1 <div class="relative"> 2 <div class="absolute"> 3 相对于最近 relative 祖先元素定位 1 4 </div> 5 <div class="absolute light"> 6 相对于最近 relative 祖先元素定位 2 7 </div> 8 </div>
CSS 代码
1 div { background: #0094ff; width: 250px; height: 100px; } 2 .relative { background: #ff6a00; position: relative; width: 500px; height: 300px; top: 20px; left: 50px; } 3 .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; } 4 .light { background: #f3d6d6; top: 70px; left: 80px; }
效果图
我们可以看到，第二个绝对定位元素盖住了第一个元素，那怎么让第一个元素盖住第二个元素呢，这就要用到 z-index 属性，这个属性表示元素的叠加顺序，默认情况下，z-index 为 0，数值越高的元素层级越高，就可以盖住低于其层级的元素，我们设置第一个原色的 z-index 为 10，结果如下
如果两个元素的层级相同，则越后面的元素会覆盖前面的元素，默认情况下，第二个元素就会盖住第一个元素。
固定定位
fixed 定位很简单，类似与 absoulte，但是它的包含块就是浏览器窗口，相对来说简单很多。常见的应用比如固定导航，回到顶部。在这里不再赘述，大家可以查找相关资料。
相对定位
relative 定位的元素进行偏移后，不会脱离文档流，还有占据原本的空间。除此之外，我们还要注意一个细节：如果元素设置了 margin 为负值之后发生重叠的情况下，相对定位的元素会覆盖普通元素。我们看看下面的例子：
HTML 代码
1 <div class="no-relative"> 2 未相对定位的元素 3 </div> 4 <div class="minus-margin"> 5 负 margin 元素 6 </div>
CSS 代码
1 div { background: #0094ff; width: 250px; height: 100px; } 2 .no-relative { background: #ff6a00; width: 200px; height: 100px; } 3 .relative { background: #ff6a00; width: 200px; height: 100px; position: relative; } 4 .minus-margin { margin-top: -30px; }
效果图
默认情况下，两个元素都是正常的元素，设置了负的 margin 属性后，后面的元素会覆盖前面的元素，我们修改第一个元素的 class 为 relative，可以看到效果如下：
添加了相对定位后，第一个元素就会覆盖其他正常的元素了。
relative 属性最经常的一个应用应该是作为 absolute 元素的包含块了，为了限制 absolute 元素的偏移位置，常常设置其父元素为 relative 来作为其包含块。
应用举例
position 的应用非常频繁，下面我来说说常见的一些场景：
产品标签
在电商网站中，我们常常可以看到产品的左上角或右上角有一些比如“新品”，“促销”，“热卖”等标签，比如下图：
这个是怎么实现的呢，我们来模拟一下：
HTML 代码：
1 <div class="product"> 2 我是产品 3 <span class="hot"> 4 热卖 5 </span> 6 </div>
CSS 代码：
1 .product { width: 150px; height: 150px; background: #0094ff; position: relative; } 2 .hot { position: absolute; right: 10px; top: 10px; width: 40px; height: 20px; background: #ff6a00; text-align: center; }
效果如下：
如图所示，右上角有一个标签。原理很简单，就是设置父元素相对定位，标签元素绝对定位，然后相对于父元素偏移到右上角。
自动完成框
自动完成框是一个非常常见的应用，其生成的下拉菜单也是用到了 position 属性。我们先看看下面的效果：
这是一个很简单常见的下来自动完成框，我们来看看它的 HTML 和 CSS 代码：
HTML 代码
1 <input class="search-box" type="text" placeholder="请输入关键字" value="position" /> 2 <ul style="left:58px;"> 3 <li>position 属性</li> 4 <li>position 应用</li> 5 <li>position 是什么</li> 6 <li>position 翻译</li> 7 </ul>
CSS 代码
1 .search-box { border: 1px solid #ccc; width: 200px; padding: 5px; height: 24px; margin-left: 50px; } 2 ul, li { list-style-type: none; } 3 ul { border: 1px solid #ccc; width: 210px; position: absolute; } 4 li { padding: 5px; }
这个原理也很简单，通过设置下拉菜单为绝对定位，然后设置其 left 属性与输入框对齐。
当然 position 的应用还有很多，比如布局，比如 fixed 可以用来做固定导航菜单，网页右下角的固定菜单等，有兴趣的同学可以自行查找相关资料进行学习。
总结
position 属性是一个容易让初学者迷惑的属性，尤其是 absolute 和 relative 的应用。要用好它们，首先要从 absolute 和 relative 的基本特性开始了解，理解了他们的特性之后应用起来就得心应手了，了解基本原理后，多多写几个例子从实践中去体会它们的特性，慢慢的就会熟悉了。