« 久坐不动引发的多种疾病
不用SEO取得成功的10个步骤 »

10 步学习如何进行 css 定位

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

1 . position:static：

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

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

效果：
01.jpg

2 . position:relative

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

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

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

效果：
02.jpg

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

3 . position:absolute

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

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

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

效果：
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. #div-1 {
  2. position:relative;
  3. }
  4. #div-1a {
  5. position:absolute;
  6. top:0;
  7. right:0;
  8. width:200px;
  9. }

效果：
04.jpg

5 . two column absolute

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

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

效果：
05.jpg

6 . two column absolute height

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

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

效果：
06.jpg

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

7 . float

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

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

效果：
07.jpg

8 . float columns

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

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

效果：
08.jpg

9 . float columns with clear

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

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

效果：
09.jpg

10 . Disclaimer & Resources

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

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

2007-08-02 网页制作 1,030 人浏览 0 条评论 , , ,

相似日志:

发表评论