精通CSS高级Web标准解决方案:相对定位与绝对定位

 

    2.2.2  相对定位

    相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。如果将top设置为20像素，那么框将出现在原位置顶部下面20像素的地方。如果将left设置为20像素，那么会在元素左边创建20像素的空间，也就是将元素向右移动（见图2-10）。

    #mybox {
      position relative;
      left: 20px;
      top: 20px;
      }

图2-10  对元素进行相对定位

    在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框。

    2.2.3  绝对定位

    相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。与之相反，绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在时一样（见图2-11）。

图2-11  对元素进行绝对定位

    绝对定位的元素的位置相对于最近的已定位祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。根据用户代理的不同，最初的包含块可能是画布或HTML元素。

    与相对定位的框一样，绝对定位的框可以从它的包含块向上、下、左、右移动。这提供了很大的灵活性。可以直接将元素定位在页面上的任何位置。

    对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于”元素在文档流中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么是最初的包含块。

    因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。可以通过设置z-index属性来控制这些框的堆放次序。z-index值越高，框在堆中的位置就越高。

    绝对定位的元素的位置相对于最近的已定位祖先元素，这使我们能够实现一些非常有意思的效果。例如，假设希望让一个文本段落对准一个大框的右下角。只需对包含框进行相对定位，然后相对于这个框对段落进行绝对定位：

    #branding {
      width: 700px;
      height: 100px;
      position:relative;
      }
     #branding.tel{
     position:absolute;
     right:10px;
     bottom:10px;
     text-align:right;
     }
    <div id="branding">
    <p class="tel">tel:0845 838 6163</p>
    </div>

    相对于相对定位的祖先元素对框进行绝对定位，这在大多数现代浏览器中实现得很好。但是，在Windows上的IE 5.5和IE 6中有一个bug。如果试图相对于相对定位的框的右边或底部设置绝对定位的框的位置，那么需要确保相对定位的框已经设置了尺寸。如果没有，那么IE会相对于画布定位这个框。在第9章中可以进一步了解这个bug和修复方法。简单的解决方案是为相对定位的框设置宽度和高度，从而避免这一问题。

    在进行页面布局时，绝对定位是非常有用的工具，尤其是在使用相对定位的祖先元素的情况下。完全可能只使用绝对定位创建出整个设计。为此，这些元素需要具有固定尺寸，这样就能够将它们定位在任何地方而不会有重叠的风险。

    因为绝对定位的元素与文档流无关，所以它们不影响普通流中的框。如果扩大绝对定位的框（例如，通过增加字号），周围的框不会重新定位。因此，尺寸的任何改变会导致绝对定位的框产生重叠，从而破坏精心调整过的布局。

    固定定位

    固定定位是绝对定位的一个子类别。差异在于固定元素的包含块是视口。这使我们能够创建总是出现在窗口中相同位置的浮动元素。这种情况的一个示例可以在snook.ca上看到（见图2-12）。博客评论表单采用固定定位，这使它在页面滚动时一直出现在屏幕上的相同位置。这有助于改进易用性，用户不必为了发表评论而一直滚动到页面底部。

    图2-12  在snook.ca上，屏幕右边的评论区域采用固定定位，因此一直出现在视口中的相同位置

    不幸的是，IE 6和更低版本不支持固定定位。为了解决这个问题，Jonathan Snook使用JavaScript在IE中重现了这个效果。