互联网前端技术中最基础的事情就是做页面。

做页面最基础的事情就是做版块的布局。

做布局最基础的事情就是元素的定位。

而定位竟又分出了5种类型：

正常定位 static相对定位 relative绝对定位 absolute固定定位 fixed粘性定位 sticky

说到定位，确实是个实践性很强的技术，光看文档和范例未必能准确理解掌握，一旦实际应用，如果没有章法，各种定位方式混在一起，相互作用，相互干扰，排版就变成了尴尬的算术题，往往越写越乱，经常会产生莫名其妙的排版结果，弄的很头大，即使最终做出了需要的页面效果，往往也是连蒙带猜，反复调试修改，花费大量时间不说，代码质量一定也很差。

所以无论初学者还是有一定经验的，无论是手写布局，还是使用各种UI框架做页面，都应该对这几种定位方式弄清楚细节，后续工作中才会更加顺利，事半功倍。

为此笔者精心制作了几张图解，配以对应的示范代码，并从实践的角度简化了定位的原则，旨在以一种更易于理解、更贴近实战的方式，让你看明白、搞清楚。

正常文档流

页面是如何建立起来的呢？是通过html和css代码形成页面结构，把各个元素块儿，像写word文档那样，让图片文字一个接一个地排列组合而成。正常的文档流，默认情况下，每个元素都会占用一定的空间，它们从左到右，从上到下依次排列，相互不会覆盖。

定位

所谓定位，就是人为的设定每个元素块上下左右的位置。之所以要定位，就是为了改变文档流中紧挨着的元素位置，实现我们所需要的排版意图。设定位置主要有2个途径：

1、在正常的文档流中：所有元素都可以通过 margin 控制它同外围4周元素的距离

2、有浮起特性的元素：通过 top,left,right,bottom 指定浮起后额外的位置偏移

所谓浮起，是指元素离开文档流，本身不再占据空间，好像飘浮在上面

定位就是设置 position 属性，它可以有5个类型，下面分别说明：

一、正常定位 static

position为空，则默认就是static，正常定位就是正常的文档流，所有元素都可以通过 margin 控制它同外围4周元素的距离，在写法上通常可以这样写

margin:1px 2px 3px 4px;

4个数值分别代表：矩形元素的4条边同上、右、下、左（就是顺时针走一圈）周围元素的距离。也可以分开写成 margin-top、margin-right、margin-bottom、margin-left

先简要介绍下实验用的代码：

实验代码的html部分如下

<div class="demo">static定位</div><div class="box">	<div class="demo">（容器内）static定位</div>	<div>（容器内）后面的文档流</div></div>

这个文档流是这样构成的：

首先一个div用static定位，下面跟一个容器div，容器中又有一个div也是static定位，后面跟一段文字块。

在后续几个定位模式中我们重复地使用这个html代码，仅仅修改其引用的css中的position属性，来观察变化。

实验代码的css部分如下

<style>body{font-family:"Microsoft YaHei";margin:0;}.box{	width:400px;height: 200px;	border: 1px solid green;background-color: #cfc;opacity:0.7;	margin: 50px 0 0 50px;}.demo{	position: static;	width: 100px; height: 40px;	border: 1px solid red;background-color: #fcc;opacity:0.8;color:red;	top:50px;left:100px;	margin:20px 0 0 10px;}</style>

body的样式定义了字体，设置页面边距为0，这个仅仅是做个基础效果，跟本次主题无关。

.box的样式是做为容器用的，我们统一设置为：

容器款400高200，左边距50上边距50，边框绿色，背景浅绿半透明。后面我们简称其为“绿色容器块”

.demo的样式是为测试定位用的：

设置基础样式宽100高40，边框红色，背景淡红半透明，字体红色设置margin为左边距10，上边距20，设置浮动为top上边距50，left左边距100设置position: static;

其中前2个设置是固定的，我们在后续几个定位模式中会重复地使用这部分css代码。至此，我们设置好了“2个红色块，一个在容器外，一个在容器内”。在容器外的红色块，其实就是以浏览器窗口为容器了。

现在只需通过修改position的不同类型，查看2个红色块儿和绿色容器的位置关系，就可以了解各种定位究竟是怎么回事了。

先看看正常定位时的效果：

这就是正常的文档流，2个红色块只有margin起作用，左边和上边各自距离上级容器10和20像素，而绿色容器的左边以窗口为基准，上边以上一个红色块底部为基准来定位50像素

二、相对定位 relative

.demo改一行css

position: relative;

看看效果

注意几个变化：

红色块相对原来的位置移动了left和top的距离，其基准是各自所在的容器。绿色容器的位置没有变，仿佛仍然紧跟原来位置的红色块（仍占位）绿色容器里面的文字块位置没变，仿佛仍然紧跟容器内红色块原来的位置（仍占位）

三、绝对定位 absolute

.demo改一行css

position: absolute;

看看效果

我们看到了明显的变化：

绿色的容器位置变了，其顶部的位置基准变成浏览器窗口的顶部，而不是跟着原来的红色块了。两个红色块也重叠到一起了，因为容器内部的红色块的位置基准也变成了浏览器窗口，绿色容器里面的文字块位置变了，容器内红色块原来的位置不再占用，所以文字提前了

接下来，如果我们把绿色容器的定位属性改一下会如何？

position: relative;

看看效果

效果跟刚才不一样了，区别在哪里呢？区别就是：

2个红色块的位置基准，分别是各自原来的容器，即容器外的相对于浏览器窗口，容器内的相对于容器

四、固定定位 fixed

.demo改一行css

position: fixed;

仔细看我们发现跟前面position: absolute;时的第一种情况一样，没错，确实一样，但是有一个区别，就是当我们滚动屏幕的时候，所有元素都在滚动，只有那2个红色块是固定不会动的！而前面absolute状态时，2个红色块是跟着滚动的。

五、粘性定位 sticky

.demo改一行css

position: sticky;

从外观上看跟static是一样的，不过sticky有个神奇的地方在于其“粘性”，我们重新写一段代码来演示它：

<style>	body{background-color: #333;color:#eee;font-size:24px;margin:0;}	.demo{		width: 100%;height: 40px;		background-color: #e00;		position: sticky; top:10px;	}</style><!-- 顶部内容 --><div style="height:100px;">	顶部菜单若干1<br>	顶部菜单若干2<br>	顶部菜单若干3<br></div><!-- 第1屏内容 --><div>	<div class="demo">sticky定位，先走再停，第一屏走完我才走</div>	正文第1屏1<br>	正文第1屏2<br>	正文第1屏3<br>	正文第1屏4<br>	正文第1屏5<br>	正文第1屏6<br>	正文第1屏7<br>	正文第1屏8<br>	正文第1屏9<br></div><!-- 第2屏内容 --><div style="height:10000px;color:#0e0;">	正文第2屏1<br>	正文第2屏2<br>	正文第2屏3<br>	正文第2屏4<br>	正文第2屏5<br>	正文第2屏6<br>	正文第2屏7<br>	正文第2屏8<br>	正文第2屏9<br></div>

效果是这样：

视频加载中...

总结一下：

正常定位 static（默认）

平时是正常文档流、占据空间，用top,left指定位置是无效的用途：大部分时候默认都用这个，是整个页面的主文档流

相对定位 relative

平时是正常文档流、占据空间指定位置top,left等后，相对于文档流进行偏移、并浮起，但不释放、也不改变原来占据的位置。用途：通常用于做容器，以此容器为基准，里面再放置其它元素，这些元素相对于本容器进行绝对定位，以便将位置整体固定下来。

绝对定位 absolute

平时是正常文档流，但是浮起的，不占据空间指定位置top,left等后，分两种情况：1）如果其上级的position是空或者static

脱离正常文档流，相对于浏览器的大窗口进行偏移，原来的margin也一起叠加，

2）如果其上级的position是relative或者其它定位

脱离同级文档流，相对于上级容器的位置进行偏移，原来的margin也一起叠加。

滚动：有效。用途：通常用于与上级relative容器搭配，做容器的子元素，这些元素相对于本容器进行绝对定位，以便将位置整体固定下来。

固定定位 fixed

平时是正常文档流，但是浮起的，不占据空间指定位置top,left等后，脱离正常文档流，相对于浏览器的大窗口进行偏移，原来的margin也一起叠加。滚动：无效。用途：通常用于做头部，尾部的导航、漂浮的菜单、广告、客服入口提示等

粘性定位 sticky

平时是正常文档流，占据正常空间。指定位置top,left等是无效的。当拉动滚动条后，元素一开始在页面滚动时也如同在正常流中，但页面向上滚动到top位置时就会固定在屏幕上，浮起不动，如同fixed一般。当页面继续向上滚动，直到到它的上级容器的底部跟它的底部接触后，就一起向上滚动，直到滚出屏幕。这个属性值在浏览器兼容性上比较差，低版本不支持。用途：通常用于做头部的关键导航区

像上面这样一一罗列下来，仍然是很罗嗦的不是吗？其实这就是一个通过做实验，归纳总结，走脑子的过程，在没有实践经历的时候，这些实验性的代码，把空洞的理论呈现了出来，而如何在实践中用上这些定位的知识才是我们的最终目标。

定位3大原则：

从实战的角度我把定位大致简化为3个原则，既然是简化的，因此就不太严谨，忽略了一些细节，也不是唯一最优方案，但多数情况下还是适用的，而且此简化方案大大降低了使用的复杂性。

1、弄清一个块儿在文档流中是否占据位置空间？

正常定位、相对定位relative，都是正常摆放的块儿，要占空间；绝对定位absolute、固定定位fixed，都是浮起的块儿，不占位置。

2、弄清如何设定一个块儿的位置，其坐标是以谁为基准？

凡是要占空间的块儿，用margin等确定位置，它是以4周相邻元素为基准；凡是不占位置的块儿，尽量用top，left 等确定位置，它是以浏览器窗口（父容器为static或空时）或父容器为基准的。

3、上述5种定位方式在实践中如何选用？

一般情况，只要是可以简单依次排列的，就用默认的正常定位顺次摆放元素即可；局部的复杂精确排版，比如页面中部的标题图片列表，使用relative定位的块儿做容器，内部元素相对于此容器做absolute绝对定位完成布局；局部需要固定位置，不随滚动条滚动的，比如页面头部尾部，使用fixed固定定位或sticky粘性定位。

至此，position定位的知识总结完了，排版布局终于有简单的章法可依了，是不是很容易看懂呢？