css复习整理(四)：css定位

一.定位机制

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

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

二.position属性

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

2) relative  元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留，用于设置相对于其本来位置的偏移。

3) absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框，绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

4) fixed  元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身，常用于固定于窗口底部的内容，不随滚动而改变位置。

三.css浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，浮动框不在文档的普通流中。

四.常用属性

1) overflow：当内容溢出元素框时使用这一属性进行设置，可设置为visible, hidden, scroll, auto, inherit；

2) clip：设置元素的形状，如clip:rect(0px,60px,200px,0px)；

3) z-index：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值，注意Z-index 仅能在定位元素上奏效（例如 position:absolute;）；