css 中的定位，是布局中常用的一种方法，它可以使html元素脱离文档流，重新定位。语法如下：

position: static|relative|absolute|fixed

position 有四个值，static（默认静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位），通常配合left、top及z-index属性使用（static除外）。

• left —— 定位元素相对于定位点的左距离
• top —— 定位元素相对于定位点的上距离
• z-index ——定位元素的层级，当有多个定位元素上，通过此属性调整元素的显示层级，值越大的显示在最上面。默认如果不设置z-index属性，则会按照其在文档流中的先后位置显示。

static（静态定位）

静态定位很简单，html元素默认就是静态定位，和正常情况下html元素在文档流中的排版一样。left、top和z-index属性对应静态定位来说不起任何左右，如下图示例：

图1中的模块1，虽然设置了position:static,但是其表现和没有设置是一样的，按照标准文档流进行排版。

relative（相对定位）

相对定位是html元素相对于它原来在标准文档流中的位置来定位的。如果不设置top、left的话它和静态定位一样，不同之处就是它可以设置top、left和z-index属性，如下图示例：

代码：

显示效果：

图3中模块2使用了相对定位，脱离正常的文档流，相对于原始位置左边50px，顶部30px，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有偏移。

相对定位的元素宽度默认和块级元素一样，宽度100%；

absolute（绝对定位）

绝对定位时当父级元素也是定位元素（包括相对定位、绝对定位、固定定位）时，它就相对于父级元素的左上角定位，如果父级元素没有定位或者是静态定位，那就相对于浏览器窗口左上角定位。如下示例：

代码：

显示效果：

图5中模块3和模块2-1都设置为绝对定位，模块3的父级没有定位，模块2-1的父级是模块2（相对定位）。所以模块3相对于页面左上角位置定位，模块2-1相对于模块2左上角定位。

绝对定位不保留原来的位置，完全是脱离文档流，且其宽度变成不是100%（类似行内元素），它通常都是和有定位的父级元素一块使用才有意义。

fixed（固定定位）

固定定位，通俗讲就是固定到屏幕上，它和绝对定位一样完全脱离文档流，不保留原来的空间位置。唯一的区别就是它是始终都是相对于浏览器窗口左上角定位，不管其父级元素设置了定位。如下示例：

代码：

显示效果：

图7中模块4的设置为固定定位，它的父级时模块2（相对定位），可以看出和模块2-1（绝对定位）的区别，模块4不是相对于父级的。

再看下面这个示例，当滚动滚动条时模块4始终定在那块不动。

关于z-index

注意看上面图8中，模块4显示在模块3下面，看下图模块3的z-index明明比模块4的小，为什么会显示在模块4上面？

原因是模块4的父级模块（相对定位），它的z-index是100和模块3相同，又因为模块3元素在模块2元素后面，所以模块3显示在模块4上面，如果把模块2的z-index改成101，如下图：

模块4显示在模块3上面了，所以z-index的属性是同级元素相互进行比较大小。

总结

在网页布局中，定位在早期使用较多，现在不建议过多使用定位，只有在特殊情况下使用，比如返回顶部按钮效果，或左侧导航栏，菜单栏固定定位，不跟随页面滚动等。

本篇主要知识点：

感谢关注，欢迎指正错误及补充。

上篇：前端入门——浮动float