css 布局之position定位

为了制作更多复杂的布局，我们来讨论一下定位（position）属性。

它有一堆值，值的名字都很抽象，很难记，举例子看一下：

static ：position：static；

static 是默认值。任意 position: static; 的元素不会被特殊的定位。（static默认原位置不动，并且不会特殊的定位）一个 static 元素表示它不会被“positioned”（定位），一个 position 属性被设置为其他值的元素表示它会被“positioned”。总结为默认值，不会把元素定位；

 

relative：position：relative；

reletive是相对定位。元素设置了position：relative；，但是元素还是原位不动，只有设置了偏移的值（即top、 right 、 bottom 和 left ）位置才会变，同上static的区别就是static是默认值，不会被定为，设置了偏移值位置也不会变，但是relative设置了偏移值（即top、 right 、 bottom 和 left ）位置会变，其他的元素的位置则不会受该元素的影响，设置了relative的元素偏移后仍然占位置，偏移后剩下的空隙其他元素不替补。

 

absolute：position：absolute；

absolute是绝对定位，absolute是相对最近有定位的祖先定位的，

<div>

　　<p>我是绝对定位</p>

</div>

假设div设置了定位，p设置了absolute绝对定位，那么p就相对于div偏移；如果div没有定位，p设置了absolute绝对定位，那么p会一级一级向祖先级寻找有定位的祖先级元素，直到找到有定位的祖先级元素（注：定位指的是不是position：static的元素），如果没有找到定位，那么p相对文档body定位，

 

fixed：position：fixed；

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom和 left 属性都可用。