css知多少（11）——position

1. 引言

　　本文将用一篇文章介绍position（定位），在学习position以前，咱们应该去思考一个问题：什么状况下咱们须要定位？若是没有定位将没法知足咱们怎样的需求？咱们要知道，被人类创造出来的每个知识，都有它的用途，都要解决一些以前遇到的问题。

　　若是没有定位，咱们作出来的网页将会是循序渐进的自上而下、自左而右的平铺在浏览器上，外加经过margin和padding调整一下间距，还有就是经过float来浮动某些元素。作一些简单的网页这样就够了，例如N年以前的yahoo，虽然如今看来很low。

　　

　　可是有些状况下，这种循序渐进的网页排版知足不了咱们的要求，咱们须要某些元素跑出来，悬浮在网页上面，并且须要给它指定一个位置。这时候咱们就须要用到了position，并且是非用不可。以下图：

　　

2. relative

　　查资料可知道，position一共有四个可选属性：static/relative/absolute/fixed。其中static（静态定位）是默认值，即全部的元素若是不设置其余的position值，它的position值就是static，有它跟没有它同样。就很少介绍了。

　　相对定位relative能够用一个例子很轻松的演示出来。例如咱们写4个<p>，出来的样子你们不用看也能知道。

      

　　而后咱们在第三个<p>上面，加上position:relative而且设置left和top值，看这个<p>有什么变化。

　　

　　上图中，你们应该要识别出两个信息（相信大部分人会忽略第二个信息）

1. 第三个<p>发生了位置变化，分别向右向下移动了10px；
2. 其余的三个<p>位置没有发生变化，这一点也很重要。

　　所以，relative会致使自身位置的相对变化，而不会影响其余元素的位置、大小的变化。这是relative的要点之一。还有第二个要点，就是relative产生一个新的定位上下文，下文有关于定位上下文的详细介绍，这里能够先经过一个例子来展现一下区别：

　　

　　注意看这两图的区别，下文将有解释。

3. absolute

　　说道absolute，推荐你们去看一个视频教程，讲师对absolute讲的很是透彻，本文的一些内容也是参考了这篇教程，好东西你们一块儿分享吗！

　　话归正传，我们仍是拿以前那个例子说事儿，先写一个基本的页面——4个<p>

　　

　　而后，咱们把第三个<p>改成absolute，看看会发生什么变化。

　　

　　从上面的结果中，咱们能看出几点信息：

1. absolute元素脱离了文档结构。和relative不一样，其余三个元素的位置从新排列了。只要元素会脱离文档结构，它就会产生破坏性，致使父元素坍塌。（此时你应该能马上想起来，float元素也会脱离文档结构）
2. absolute元素具备“包裹性”。以前<p>的宽度是撑满整个屏幕的，而此时<p>的宽度恰好是内容的宽度。
3. absolute元素具备“跟随性”。虽然absolute元素脱离了文档结构，可是它的位置并无发生变化，仍是老老实实的呆在它本来的位置，由于咱们此时没有设置top、left的值。
4. absolute元素会悬浮在页面上方，会遮挡住下方的页面内容。

　　最后，经过给absolute元素设置top、left值，可自定义其内容，这个都是平时比较经常使用的了。这里须要注意的是，设置了top、left值时，元素是相对于最近的定位上下文来定位的，而不是相对于浏览器定位。下文立刻会讲定位上下文。

　　可是有时候设置top、left值并非定位的最佳解决方案。例如想要元素A紧跟在元素B的上方，可经过设置元素B为absolute，而后调整B的margin值来肯定，这样更有效率。以下图：

　　

　　以上提到的信息，若是展开来讲，内容很是多，并且用文本也很差描述，仍是推荐你们去看慕课网的那篇视频教程，讲的颇有意思。

　　

　　最后，再提几个小知识点。

1. 设置absolute会使得inline元素被“块”化，这在上一节将display时已经说过；
2. 设置absolute会使得元素已有的float失效。不过float和absolute同时使用的状况很少；
3. 上文提到了absolute会使元素悬浮在页面之上，若是有多个悬浮元素，层级如何肯定？答案是“后来者居上”

4. fixed

　　其实fixed和absolute是同样的，惟一的区别在于：absolute元素是根据最近的定位上下文肯定位置，而fixed永远根据浏览器肯定位置。

　　上文不少次提到了“定位上下文”，那么它究竟是一个什么东东？答案立刻揭晓。

5. 定位上下文

　　5.1 relative的定位

　　relative元素的定位永远是相对于元素自身位置的，和其余元素不要紧，也不会影响其余元素。

　　

　　5.2 fixed的定位

　　fixed元素的定位永远是相对于浏览器边界的，和其余元素没有关系。可是它具备破坏性，会致使其余元素位置的变化。

　　

　　5.3 absolute的定位

　　absolute的定位相对于前二者要复杂许多。若是为absolute设置了top、left，浏览器会根据什么去肯定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的全部父元素，若是找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，若是没找到，就以浏览器边界定位。以下两个图所示：

　　

　　

　　上图中的“某一层祖先元素”就是该absolute元素的定位上下文。讲到这里，咱们上文中的那个图，你们能看明白了吧？还有不明白的能够留言给我。

　　

 

6. 总结

　　我感受position这篇文章是这一系列中最难写的文章，它的知识点比较多，并且很是难理解，所以position也是css的一个重点知识，不懂position的前端开发人员要抓紧恶补一下。

　　写了这么多，感受仍是写的不是很全面，或者不是很系统，很但愿你们把本身的意见反馈给我。这个系列博客算是这个教程的初版，我计划后期抽时间会录制一个视频版，到时候但愿会更加全面系统一些。

---------------------------------------------------------------

本系列的目录页面：http://www.cnblogs.com/wangfupeng1988/p/4325007.html

-------------------------------------------------------------------------------------------------------------

学习做者教程：《前端JS高级面试》《前端JS基础面试题》《React.js模拟大众点评webapp》《zepto设计与源码分析》《json2.js源码解读》

也欢迎关注个人开源项目——wangEditor，简洁易用的web富文本编辑器

-------------------------------------------------------------------------------------------------------------