10 步学习如何进行 css 定位
我们今天来探讨一下不同的 css 布局特性，包括：position:static, position:relative, position:absolute, 等等。
1 . position:static：
网页各个单元的默认位置，这意味着该单元的位置通常不发生变化。在一般情况下，你不需要特别对它进行设定，除非你需要指定先前已经确定的另一个位置。
- #div-1 {
- position:static;
- }
效果：
2 . position:relative
如果你设定了 position:relative ，你就可以使用 top 、bottom 、left 或 right 来设定版面中各个元素相对其原来位置做出改变。
下面我将 div-1 向下移动 20 pixels ，再向左移动 40 pixels。
- #div-1 {
- position:static;
- }
效果：
可以注意到 div-1 已被改变位置，我们没有移动 div-after ，导致 div-after 被 div-1 所遮挡。
3 . position:absolute
如果你对某个单元设定了 position:absolute ，你就能将这个元素放置到你想要它出现的任何地方。
下面让我们把 div-1a 移到右上角。
- #div-1a {
- position:absolute;
- top:0;
- right:0;
- width:200px;
- }
效果：
大家可以注意到 div-1a 已被单独移到右上角了，div-1b, div-1c, 还有 div-after 随着 div-1a 的移动自动上移。
4 . position:relative + position:absolute
如果我们设定 div-1 relative ，这时如果我们再设置 div-1a absolute ，我们就可以把 div-1a 移动到 div-1 的右上角。
- #div-1 {
- position:relative;
- }
- #div-1a {
- position:absolute;
- top:0;
- right:0;
- width:200px;
- }
效果：
5 . two column absolute
利用 relative/absolute 定位，我们能制作一个两栏布局。
- #div-1 {
- position:relative;
- }
- #div-1a {
- position:absolute;
- top:0;
- right:0;
- width:200px;
- }
- #div-1b {
- position:absolute;
- top:0;
- left:0;
- width:200px;
- }
效果：
6 . two column absolute height
我们可以设立一个固定高度的两栏布局。
- #div-1 {
- position:relative;
- height:250px;
- }
- #div-1a {
- position:absolute;
- top:0;
- right:0;
- width:200px;
- }
- #div-1b {
- position:absolute;
- top:0;
- left:0;
- width:200px;
- }
效果：
但是这个方案的应用不多，因为我们不可能提前知道要加入的内容有多少，改变字体也会有所影响。
7 . float
我们可以向右或左”浮动”的一个元素，并让文字围绕它。这个应用一般用于图像。
- #div-1a {
- float:left;
- width:200px;
- }
效果：
8 . float columns
如果”浮动”的一个元素到左边，”浮动”的另一个元素到右边，那结果会是：
- #div-1a {
- float:left;
- width:150px;
- }
- #div-1b {
- float:left;
- width:150px;
- }
效果：
9 . float columns with clear
我们还能利用 “clear” 命令来达到比较好的效果。
- #div-1a {
- float:left;
- width:190px;
- }
- #div-1b {
- float:left;
- width:190px;
- }
- #div-1c {
- clear:both;
- }
效果：
10 . Disclaimer & Resources
这些例子都非常简单，而且在 Windows IE 浏览器不会出现 css 错误。
其它一些好的资源：
Relatively Absolute
CSS 教材：18 步改变你网站的 css ，使你从初学者成为高级用户
原文地址：barelyfitz.com
翻译：peterzsk
