本文共 1575 字，大约阅读时间需要 5 分钟。
一、定位
设定元素在文档中的位置。会将标签（元素）转换为块级
二、定位分类
1、static:静态定位
默认值，没有定位，不能设置偏移值(left/top/right/bottom)，占用标准流（文档流）
Title
可以将.box2的样式注释掉，其实效果是一样的，写不写无所谓因为是默认值，至于为什么三个在同一行，是因为display设置成了inline-blick
2、relative:相对定位
占用标准流（文档流），它会出现在文档流中它该出现的位置。可以通过设置偏移值改变其位置。它相对于自身所占的位置做偏移。
Title
可以看到图像进行了偏移，它偏移的方向是相对于原来位置，其中注意的是top：100px其实是向下偏移100px，也就是偏移后的图形顶部距离边框的距离为100px，left：-100px才是向左100px
3、absolute:绝对定位
脱离文档流，相对于body做偏移。绝对定位一般与相对定位结合使用，它相对的父级是relative定义的元素做偏移。relative的元素必须是absolute的父级。在项目开发中，一般用relative+absolute结合使用，使用较多。
（1）没有relative的情况
Title
如果没有relative的设置，那么absolute就是相对于整个页面进行偏移
（2）存在relative
Title
如果存在relative，就像前面介绍的那样，相对的父级是relative定义的元素做偏移。
4、fixed:固定定位
脱离文档流，相对于浏览器窗口左上角（0，0）做偏移，它与relative设定的对象没有关系，也就是说，它跟父级的定位没有任何关系。 一般在开发中用来固定导航栏，也可以理解成每次浏览网站时总会出现的小广告的固定位置。
Title hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
可以看到，你不管怎么移动，固定的方框位置永远不会变
三、z-index
当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次。文档流默认的z-index的值为0。用在static和relative元素上将无效。
Title
这个其实很好理解，数字大的在最上面，越小越在下，一般都是使用的是1,0，-1，当然前提数字也可以。
转载地址：http://ryvrn.baihongyu.com/