css学习笔记之position

学习来源：

http://www.cnblogs.com/xiaohuochai/p/5312917.html

position的几个属性值：

static	默认值。没有定位，出现在正常文档流中
absolute	绝对定位，相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于初始包含块document
relative	相对定位，相对于其正常位置进行定位
fixed	绝对定位，相对于浏览器窗口进行定位

脱离文档流：

除 static  relative属性值之外，absolute fixed都会使元素脱离文档流（float也会导致元素脱离文档流）。

定位后的默认位置：

Fixed和absolute属性后的默认位置都是在原地，只是紧跟后面折正常文档流元素会顶上来，被定位元素盖住。

四个偏移属性：

这4个偏移特性来描述元素4个边的放置位置，那么元素的高度和宽度将由这些偏移隐含确定，元素将会拉伸。

top描述了定位元素上外边界离其包含块的顶端有多远。

正值，会把定位元素的上外边距边界远离包含块上边界，负值，则会把定位元素的上外边距移到其包含块的顶端之上。

left描述了定位元素的左外边距边界距离其包含块左边界有多远。

正值远离包含块左边界， 负值则把定位元素的左外边距移到包含块左边界。

[注意]定位元素的边界是指定位元素margin外侧的边界；包含块的包含区域是指包含块border内侧的padding+content区域。

absolute定位

1.破坏性

元素绝对定位后，会脱离文档流，高宽都塌陷，float是高度塌陷。

若父级为块元素，父级不设置高度，则父级高度塌陷 (高度为子元素高度，但是脱离文档流则无高度，宽度默认为父级的100%)，

若父级为行内元素，无内容，则父级高宽都将塌陷（内联元素内容撑开宽度）。

2.包裹性

元素绝对定位后，会为其后代元素建立一个包含块。

若父级为块元素，使内容可以撑开宽度。

若父级为行内元素，使支持宽高。 

[注意]浮动的包含块会延伸，进而包含所有后代浮动元素，但绝对定位的包含块并不会包含后代的定位元素，只是作为后代定位元素的定位父级。

3.去浮动

元素绝对定位后，元素原来的浮动效果将失效。这两个属性是互斥的，浮动是干不过绝对定位的。

4.层级

定位元素之间有层级，默认后者高于前者，可以使用z-index改变层级。

relative定位

1.属性值

相对定位的数值型偏移属性是相对于自身的，但其百分比却是相对于包含块的。

百分比相对于包含块的高度(只是高度height，不包括纵向padding和border)，left和right百分比相对于包含块的宽度(只是宽度width，不包括横向padding和border)

2.限制绝对定位

一般地，给绝对定位元素限制范围时，为其父级元素设置相对定位relative，因为相对定位元素不脱离文档流。

[注意]相对定位元素可以限制绝对定位，但不能限制固定定位，因为固定定位是相对于文档（视窗）定位的。

3.不会改变元素本身的特性。

fixed定位

特性同绝对定位，但始终相对于视窗偏移。

[注意]IE6-浏览器不支持。

全屏遮罩
当页面内容超出页面容器大小出现滚动条时，此时使用absolute全屏遮罩会出现滚动条以外部分没有遮住的情况。绝对定位相对于文档偏移，文档的高度和可视区域一致，也就是与视窗一致，是不包括滚动条以外部分的。
这时，只能使用fixed固定定位来实现全屏遮罩效果。