对css中的定位属性postion刨根解牛

定位的基本思想很简单:

它允许你定义元素框相对于其正常位置应该出现的位置（relative），或者相对于父元素(absolute)、另一个元素甚至浏览器窗口本身的位置(fixed)。显然，这个功能非常强大，也很让人吃惊。

 

一切皆为框:

 

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

 

CSS 定位机制

 

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

 

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

 

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

 

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

 

以上介绍皆为铺垫，接下来才是真正的讲解postion这个属性

 

大家都知道postion属性有四个值，static fixed relative absolute,

今天我们就来剖析这四个值的特点，来揭开他们的神秘面纱：

1、static, 默认值，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

2、relative，元素框偏移某个距离，相对它在正常流中的位置，元素仍保持其未定位前的形状，它原本所占的空间仍保留。偏移量通过top/left/right/bottom/设置

3、absolute,元素框从文档流完全删除（自然其宽高对父元素毫无影响），并相对于postion值为relative其包含块偏移定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

4、fixed ,元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

 

补充说明：

relative定位：

1、设置一个元素为相对定位后，如果不设置其偏移量（即 top|right|bottom|left值），则对于其本身而言，和没设相对定位，毫无区别和影响，但可能对子元素有影响（比如有绝对定位的子元素）

2、相对定位的元素偏移到其它地方，其宽度高度不会改变（原本width默认100%,还是100%，这是和absolute不一样的地方），不会挤压掉别的地方原本的元素，但会重叠，重叠的效果是，会覆盖掉未定位（即postion值为static）的元素，而不管其元素的html标签在相对定位元素的前面还是后面，对应定位元素，则是根据z-index属性值来，如果两个值相等，则比较html标签在文档中的先后。

3、设置相对定位元素的高度宽度会影响父元素的高度宽度（因为它的原来的坑还占着，原来的坑会随着元素的宽高改变大小）

 

 

absoute定位：

1、元素设置成绝对定位后，和父元素脱离关系（如果说有关系的话，就为设置偏移量前还在原来的位置，但不占地方，其坑会被后面的兄弟元素霸占，从而重叠），所以其大小变化对父元素毫无影响

2、元素绝对定位后都是块级元素（即使原本是行级元素如span），不过其宽度不设置的话将是内容的实际大小，不在是默认的父元素的宽度，这点和相对定位是有很大区别的

3、千万记住绝对定位元素是相对于，它的相对定位的父元素，如果父元素中没有相对定位的则是相对于body

 

最后介绍下 z-index属性，它只对定位元素（级postion不等于static）才有效