CSS-position系列属性

<pre>
CSS-position系列属性总结，写记下来，希望对大家有帮助，供新人学习，老人查阅，共勉。
------DanlV
</pre>
position属性一般分为三个方面：相对定位(position:relative)、绝对定位(position:absulote)、固定定位(position:fixed)。下面具体来写这三种的特点及其用法。

相对定位position:relative

什么是相对定位？

相对定位是根据自己原来的位置来进行移动定位。

相对定位的特性

1.微调元素，相对于自己原来的位置移动，位移通过设置方向left right top bottom的值来进行移动
2.不脱标，形影分离，身体留在原本位置（本体看不见但还是占有位置），影子移动
不脱标：不脱离标准文档流和标准文件流

相对定位常见用途

1.微调元素
2.做绝对定位的参考 -- 子绝父相 即：子元素采用绝对定位，父元素采用相对定位

绝对定位 position:absolute

什么是绝对定位？

根据参考元素来进行定位。

绝对定位的特性

1.根据参考点来进行位移

• 位移通过设置方向left right top bottom的值来进行移动
• 参考点
  --- 绝对定位的元素没有父元素
  --->绝对定位的参考点，如果用top描述，那么定位参考点就是
  页面的左上角，而不是浏览器的左上角
  --->如果使用bottom来描述，就是浏览器首屏窗口，左下角
  --- 如果父级有定位属性
  --->就以父级为参考点，如果父级没有定位，就继续向上层去找
  --->如果一个盒子设置了绝对定位，并且向一个方向上位移，那么与这个方向相同的padding值将会失效
  2.绝对定位脱标 ，如果父元素没有相对定位，那么脱标带来的影响将无法解决。
  TIPS：子元素采用绝对定位的话，所对应的参考系为父元素的定位，若父元素定位无，则向上寻到已定位的元素，根据此元素绝对定位。

绝对定位的盒子居中

1.绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。
2.居中：left:50%;margin-left:负的宽度的一半。

固定定位position:fixed

• 固定定位就是相对浏览器窗口定位。页面无论如何滚动，这个盒子显示位置不变
• 固定定位的盒子脱标
• 缺点：ie6不兼容

z-index

在定位的盒子两个之间产生覆盖时，造成一个盒子盖住另一个盒子的现象，可以设计z-index属性值来说设置优先级。

• z-index值表示谁压着谁。数值大的压盖住数值小的。
• 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
• z-index值没有单位，就是一个正整数。默认的z-index值是0
• 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
• 从父现象：子元素的z-index值再大也打不过父元素，父元素之间的相互比较定级，子元素听从父元素的z-index的胜负。