图解css的5种position定位，一看就懂，再也不会搞晕

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

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

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

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

1. 正常定位 static
2. 相对定位 relative
3. 绝对定位 absolute
4. 固定定位 fixed
5. 粘性定位 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>

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

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

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

实验代码的css部分如下

欢迎大家来到IT世界,在知识的湖畔探索吧!<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的样式是为测试定位用的：

1. 设置基础样式宽100高40，边框红色，背景淡红半透明，字体红色
2. 设置margin为左边距10，上边距20，设置浮动为top上边距50，left左边距100
3. 设置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定位的知识总结完了，排版布局终于有简单的章法可依了，是不是很容易看懂呢？