CSS的position属性完全解析

一、定位基本原理

对于前端开发工程师来说，编写CSS是前端开发工作中必不可少的一个内容，在CSS中的position属性又是非常重要的一个方面。顾名思义，所谓position，即是对HTML元素定位方式的一种设置。它是CSS定位技术的基石，看似很容易学习，很多的前端工程师也会说自己掌握得很好，但事实上是这样吗？作为一个在前端开发的道路上慢慢前行的新人，我不敢这么说，那么就通过这篇文章与大家一起，了解position的奥秘。

首先，既然是CSS中的属性之一，那么我们就有必要研究一下W3C的CSS文档，毕竟这才是对此属性说明最为详细的地方。在这里要插一句，目前市面上充斥着大量的教学书籍，网络上也有很多相关的学习资源，其中固然不乏精品，但是会花点时间，认真阅读官方文档的又有多少人呢，有的时候，最乏味的往往是最准确的。

好了，话不多说，官方文档中关于position属性的内容大致是这样的：

In CSS 2.1, a box may be laid out according to three positioning schemes:

1、Normal flow

2、Floats

3、Absolute positioning

1. 常规文档流。包括块级元素排版，行内元素排版以及对块级元素和行内元素相对位置的排版。

2. 浮动。在浮动模型中，元素先按照正常文档流定位，然后从文档流中移出，根据设置向左或者向右尽可能地移动。

3. 绝对定位。元素会完全从文档流中移出，再根据父元素进行定位。

一个元素如果是根元素，或者有浮动或绝对定位的话，那它就是在常规文档流之外的，其他情况都是在文档流之内。文档中有这么一句：The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A. 有些绕，以我并不深厚的英语能力来翻译的话，应该是：元素A的flow是由元素A本身以及所有最近的文档流之外的父元素是A的流内元素所组成的。（翻译得太惨不忍睹了，求大神指点o(>

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！