CSS 定位

一、CSS 定位和浮动

 

它们代替了多年来的表格布局。

 

定位的思想很简单，相对于正常位置、相对于父元素、另一个元素甚至是浏览器窗口的位置。

 

浮动在 CSS1 中被首次提出。浮动不完全是定位，当然也不是正常的流布局。

 

---

 

二、一切都是框

 

display 属性设置元素是什么框类型。其属性为 block、inline、none 时，分别表示块级元素、行内元素和不显示(也不占用文档的空间)。

 

---

 

三、定位机制

 

有三种基本的：普通流、绝对定位和浮动。

 

在下面的小节里，会给你详细讲解相对定位、绝对定位和浮动。

 

---

 

四、定位(position)属性的四个值

 

static、relative、absolute 和 fixed。

 

static(默认)：正常显示的位置

 

relative：相对于正常显示位置，偏移后的位置。发生偏移后，原本所占的空间仍然保留。

 

absolute：相对于包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流里的所占空间不再保留，就好像元素原来就不存在一样。

 

fixed：表现类似 absolute，不过它的包含块是浏览器的窗口。

 

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

 

---

 

五、相对定位 relative

 

这是一个非常容易掌握的概念。一个元素被设置为相对定位，那就是相对于它的起点(正常的位置)垂直或者水平移动一段距离。

 

举个例子：如果一个元素，要相对于正常位置，往下 20 像素，往右 30 像素，那么它的 CSS 代码应该这样↓

 

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

 

我们看页面最终效果的话，会更加直观：

 

 

注意，使用相对定位进行移动，原来元素所占据的空间仍然保留，不仅如此，它还会覆盖其它的框。

 

---

 

六、绝对定位 absolute

 

绝对定位的元素是一个块级框，而不论它在正常流中是何种类型的框。

 

与相对定位不同的是，绝对定位会从文档流里完全删除，所以不占据空间，并相对于其包含块定位。在普通流里布局的元素，就当作绝对定位元素不存在一样：

 

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

 

这里的包含块是指最近的被定位的(positioned)元素。被定位的元素是指 position 的取值除 static 之外的元素。

 

如果绝对定位的元素往上一级、往上上一级……到文档的 body 元素了，如果还没找到包含块，那么它的包含块就是 body，它最终相对于 body 元素定位！

 

---

 

七、绝对定位 fixed 

 

与 absolute 类似，不过它是相对于视窗(浏览器窗口)定位的。通常一张页面的顶部导航栏就是用 fixed 定位的。

 

 

但，移动浏览器对 fixed 的支持很差。不过，这里有解决方案。

 

---

 

八、浮动

 

关于浮动，并不难，但有一大堆要说的，放在以后吧。

 

(完)