CSS定位

CSS定位概述——

1. CSS 为定位和浮动提供了一些属性，利用这些属性，我们可以建立列式布局。
2. 如果将布局的一部分与另一部分重叠，我们还可以完成多年来通常需要使用多个表格才能完成的任务。
3. CSS定位允许定义元素框相对于其正常位置应该出现的位置，或相对于父元素、另一个元素甚至浏览器窗口本身的位置。
4. CSS有三种基本的定位机制：相对定位、绝对定位和浮动。

CSS相对定位——

1. 如果对一个元素进行相对定位，它将出现在它所在的位置上。
2. 我们可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
3. 假设将 top设置为20px，那么框将在原位置顶部下面20像素的地方。
4. 接上如果 left 设置为40像素，那么会在元素左边创建40像素的空间，也就是将元素向右移动：

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

CSS绝对定位——

1. 设置为绝对定位的元素框会从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。
2. 元素定位后会生成一个块级框，而不论原来它在正常流中生成何种类型的框。
3. 绝对定位使元素的位置与文档流无关，所以不占据空间。
4. 将 top设置为20px，这次的框将在相对定位元素下面20像素的地方。
5. left 设置为40像素，那么会在相对定位元素左边创建40像素的空间，也就是将元素向相对定位元素下右移动。

1. 普通流中其它元素的布局就像绝对定位的元素不存在一样：

   

1. 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

CSS浮动——

1. 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2. 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
3. 在 CSS 中，我们通过float属性实现元素的浮动。
4. 假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中，我们可以编写下面的代码：

      

1. 不过这种情况下，会出现一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。