整 理：肖雅君、曹燕
时 间：2015-10-30
说 明：position定位详解
一、兼容性 二、文档流 三、定义和用法 1．position介绍 1.1 说明 1.2 主要的值 1.3 辅助属性 2.position定位方式 2.1 position: static 2.2 position:relative 2.3 position:absolute 2.4 position:fixed 2.5 z-index 三、用途 1.布局 2.设置垂直居中 3.设置全屏 4.固定内容位 一、兼容性 所有的主流浏览器都支持position属性。 二、文档流 含义：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。 只有3种情况会使得元素脱离文档流，分别是：浮动、绝对定位、固定定位。 三、定义和用法 1．position介绍 1.1 说明 position属性规定元素的定位类型，也就是说元素脱离文档的布局后，在页面的任意位置显示。 1.2 主要的值 (1) 默认值：static，无特殊定位，即不设定元素的position属性时，position值是static。它遵循正常的文档流对象，对象占用文档空间。在该定位方式下top、right、bottom、left、z-index等属性是无效的。 (2) relative：相对定位，不脱离文档流的布局，还在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。 (3)absolute：绝对定位，脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为body文档本身。 (4)fixed：固定定位，脱离文档流，相对于浏览器窗口进行定位，不随着滚动条的移动而改变位置。 (5)inherit：规定从父元素继承position属性的值。 1.3 辅助属性 position属性要想使元素脱离文档流后按照希望的位置显示，就需要使用下面的属性(position:static不支持这些)： (1)left：表示向元素的左边插入多少像素，使元素向右移动多少像素。 (2)right：表示向元素的右边插入多少像素，使元素向左移动多少像素。 (3)top：表示向元素的上方插入多少像素，使元素向下移动多少像素。 (4)bottom：表示向元素的下方插入多少像素，使元素向上移动多少像素。 2.position定位方式 2.1 position: static 2.1.1 static详解 （1）默认值static通常都会影响到元素的位置。主要是看元素本身是block属性或是inline属性。 如下图，两个<div>因为是block的关系，所以就会上下各占据一行，那如果是两个<span>，因为是inline，所以会在同一行里呈现。 代码：.div1{width:50px;height:50px;background:#f1f411;} .div2{width:50px;height:50px;background:#dfafda;} .span1{background:#f1f411;} .span2{background:#dfafda;}(2) static不能通过z-index进行层次分级。 2.2 position:relative 2.2.1 说明 相对定位。不脱离文档流的布局，在文档流的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置(即下图虚线部分)。
2.2.2 relative详解 (1)relative定位的top / right / left / bottom 属性是不会对相对定位的元素所占据的文档空间产生偏移的。
如下图：.div1{position:relative;top:20px;left:20px;}，而top值和left值并没有对div1原来的位置（即红色虚线部分）产生影响。 (2)元素的margin / padding会让该文档空间产生偏移，从而对定位产生影响。 对div1设置margin:20px;后
2.3 position:absolute 2.3.1 说明 绝对定位。a脱离文档流的布局，遗留下来的空间由后面的元素b填充。a定位是相对于距离a最近的父元素定位,且父元素的postion不为static，否则就相对于body文档本身定位。
2.3.3 absolute详解 absolute定位，也称为绝对定位，虽然它的名字号曰“绝对”，但是它的功能却更接近于"相对"一词，为什么这么讲呢？原来，使用absolute定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的。 这里还需要注意的是，relative和static方式在最外层时，是以<body>标签为定位原点的，而absolute方式在无父级是position非static定位时，是以<html>作为原点定位。 如下图，示例1的最外层wrapper层未设置position,则第一个子级a是相对于body定位，子子级a-1和a-1-1都是相对于临近的设置了position的父级定位的；而示例2的最外层设置了position，则a是相对于wrapper定位的。示例3的a-1未设置position,则子级a-1-1是相对于临近的设置了定位的a进行的定位。
（2）使用absolute或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值auto，此时该元素也是脱离文档流的。 （3） 少了left/right/top/bottom属性不行，那如果多设了呢？例如，同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？记住下面的规则： 如果top和bottom一同存在的话，那么只有top生效。 如果left和right一同存在的话，那么只有left生效。 与top/bottom/left/right的书写顺序无关。 （4）绝对(absolute)定位对象在可视区域之外会导致滚动条出现，而相对(relative)定位对象在可视区域之外，不会出现滚动条。 2.4 position:fixed 2.4.1 说明 固定定位。类似于absolute，但不随着滚动条的移动而改变位置。
2.5 z-index z-index属性，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠。 如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。 需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。 三、用途 1.布局
2.设置垂直居中 例：在移动端，由于设备宽高不固定，所以对<div>设置垂直居中需用到定位，用于匹配不同的移动设备。 .wrapper{position:relative} .head{position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); } 注意:这里定位是相对于.head的左上角定位，所以还需设置margin-top和margin-left,值为.head宽高的1/2(或者设置transition)。
3.设置全屏 常用于移动端，如：设置蒙层。 手机宽高不一定时，要保证弹出的蒙层全屏显示，可以用到position:absolute,代码如下： .wrapper{position:absolute;top:0;bottom:0;left:0;right:0;} 效果图：
4.固定内容位 如PC端页面侧栏广告、WAP端的分享按钮(如上图)、固定位广告等。
