You are here
CSS的绝对定位（absolute）与相对定位（relative）
这是一个困扰了我许久的问题，这几天做个人主页的模板，网页头部的东西显示的位置老是错位，例如主标题，副标题，导航等……
导航总是向右偏移了很多，可是当时我还没有给导航加定位，所以就开始找原因了。把CSS一行一行的往上加，看加到哪才出的错。最后找到了问题的根源，是由于主标题写了 float:left 属性。
解决了导航的偏移，但定位还是有些问题，于是去看W3SCHOOL的在线教程。
教程中说：
相对定位：
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
绝对定位：
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
绝对定位：
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
看了后大致明白，绝对定位是相对父级元素的定位，原位置将不存在，不占用空间。而相对定位会保留原位置，新位置会覆盖当前位置的元素。
可是，我在 div 标签里面的 div 加上绝对定位后，却是相对浏览器窗口的位置。很郁闷，于是Google了一下，看到说是在父元素没有使用position属性时，将相对窗口定位。之后才恍然大悟，给父元素加上 position:relative 后，一切就正常了，可以进行正常的定位了。
仅以此日志做个记录，免得以后想不起来的时候还要到处找答案。
来自 http://www.cnblogs.com/trlanfeng/archive/2011/11/19/2254806.html
普通分类: