10 步学习如何进行 css 定位

由 发表于 ┊1,832 PV

我们今天来探讨一下不同的 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