10 步学习如何进行 css 定位

我们今天来探讨一下不同的 css 布局特性,包括:position:static, position:relative, position:absolute, 等等。

1 . position:static:

网页各个单元的默认位置,这意味着该单元的位置通常不发生变化。在一般情况下,你不需要特别对它进行设定,除非你需要指定先前已经确定的另一个位置。

1
2
3
#div-1 {
position:static;
}

效果:
01.jpg

2 . position:relative

如果你设定了 position:relative ,你就可以使用 top 、bottom 、left 或 right 来设定版面中各个元素相对其原来位置做出改变。

下面我将 div-1 向下移动 20 pixels ,再向左移动 40 pixels。

1
2
3
#div-1 {
position:static;
}

效果:
02.jpg

可以注意到 div-1 已被改变位置,我们没有移动 div-after ,导致 div-after 被 div-1 所遮挡。

3 . position:absolute

如果你对某个单元设定了 position:absolute ,你就能将这个元素放置到你想要它出现的任何地方。

下面让我们把 div-1a 移到右上角。

1
2
3
4
5
6
#div-1a {
position:absolute;
top:0;
right:0;
 width:200px;
}

效果:
03.jpg

大家可以注意到 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 的右上角。

1
2
3
4
5
6
7
8
9
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

效果:
04.jpg

5 . two column absolute

利用 relative/absolute 定位,我们能制作一个两栏布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

效果:
05.jpg

6 . two column absolute height

我们可以设立一个固定高度的两栏布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 #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;
}

效果:
06.jpg

但是这个方案的应用不多,因为我们不可能提前知道要加入的内容有多少,改变字体也会有所影响。

7 . float

我们可以向右或左”浮动”的一个元素,并让文字围绕它。这个应用一般用于图像。

1
2
3
4
#div-1a {
float:left;
width:200px;
}

效果:
07.jpg

8 . float columns

如果”浮动”的一个元素到左边,”浮动”的另一个元素到右边,那结果会是:

1
2
3
4
5
6
7
8
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}

效果:
08.jpg

9 . float columns with clear

我们还能利用 “clear” 命令来达到比较好的效果。

1
2
3
4
5
6
7
8
9
10
11
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}

效果:
09.jpg

10 . Disclaimer & Resources

这些例子都非常简单,而且在 Windows IE 浏览器不会出现 css 错误。
其它一些好的资源:
Relatively Absolute
CSS 教材:18 步改变你网站的 css ,使你从初学者成为高级用户

原文地址:barelyfitz.com
翻译:peterzsk