首页 > 代码库 > 对css中的定位属性postion刨根解牛

对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)才有效

 

 

 

 

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