《精通CSS》读书笔记——CH2.3 定位

学习CSS最好的方式之一是直接开始使用它。

相对定位

通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

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

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

 

绝对定位

相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

与之相反，绝对定位使元素的位置与文档流无关，因此不占据空间。

普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。

绝对定位的框与文档流无关，所以可以覆盖页面上的其他元素。

可以通过设置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和修复方法。简单的解决方案是为相对定位的框设置宽度和高度，从而避免这一问题。

 

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

 

固定定位

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

 

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