html5+css3学习（七）之定位

html5+css3学习（七）之定位

定位

开启定位：position的值为非static
通过position属性来设置元素的定位
可选值

static:默认值，元素没有开启定位
relative:开启元素的相对定位
absolute:开启元素的绝对定位
fixed:开启元素的固定定位

当元素开启了定位，可以通过left、right、bottom、top四个属性来设置元素的偏移量

left:元素相对于其定位位置的左侧偏移量
right:元素相对于其定位位置的右侧偏移量
top:元素相对于其定位位置的上侧偏移量
bottom:元素相对于其定位位置的下侧偏移量

1、相对定位
相对定位是相对于元素在文档流中的位置进行变化，相对定位的元素不会脱离文档流，相对定位会使元素提升一个层级，可以覆盖文档流中元素
2、绝对定位
开启绝对定位元素会脱离文档流，绝对定位是相对于离它最近的开启了定位的祖先元素进行定位的，如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位，绝对定位会使元素提升一个层级，绝对定位会改变元素的性质（因为脱离了文档流 ），内联元素会变成块元素，块元素的宽度和高度默认都被内容撑开。
3、固定定位
固定定位也是一种绝对定位，不同的是：永远相对于浏览器窗口定位，固定定位会固定在浏览器窗口的位置，不会随滚动条一起滚动，IE6不支持固定定位。

元素的层级

如果定位元素层级一样，那么结构上（html文本中）后面的会盖住前面的。
通过z-index可以用来表示元素的层级，为其设置一个正整数作为值，层级越高，越优先显示
没有开启定位的元素不能开启z-index
父元素的层级再高也不会盖住子元素。