CSS的四种定位方式详解

在CSS中定位使用position属性来设置，有以下4种取值：

1. 静态定位 - static
2. 相对定位 - relative
3. 绝对定位 - absolute
4. 固定定位 - fixed

---

本文举例所用的材料

三个不同颜色的元素，都设置了同样的大小和左浮动。

本文的例子主要操作B元素。

---

静态定位 - static

静态定位是css中的默认定位方式，也就是没有定位，处于正常文档流中。

将B元素设置为静态定位，并设置top和left属性为10px

.B {
	position: static;
	top: 10px;
	left: 10px;
}

效果图如下： 

看到B元素没有任何反应，因为默认就是静态定位，在此定位方式中设置：top，bottom，left，right，z-index 这些属性都是无效的。

---

相对定位 - rel