在用 DIV+CSS 控制排版过程中，定位一直被人认为是一个难点，这里向大家描述一下 DIV+CSS 网页布局中 CSS 相对定位和 CSS 绝对定位用法，相信你一定会感兴趣。 本文和大家重点讨论一下 DIV+CSS 网页布局之 CSS 绝对定位和 CSS 相对定位，在用 DIV+CSS 控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多网友在没 有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措。 详解 DIV+CSS 相对定位和 CSS 绝对定位用法 在用 DIV+CSS 控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多 网友在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措，而另一边一 些高手则常常借助定位的强大功能做出些很酷的效果来，比如 CSS 相册等等，因此自己杂 乱的网页与高手完美的设计形成鲜明对比，这在一定程度上打击了初学定位的网友，也在他 们心目中形成这样的一种思想：当我熟练地玩转 DIV+CSS 定位时，我就已是高手了。不管 你怎么想，我只希望下面的教程能让你更深入地了解 CSS 定位属性。 阅读建议 先说说我这篇教程的思路，这对于你在正真开始阅教程前是有很大帮助的。我的思路是 这样的：先给出定位较专业化精炼的解释，接下来再用打比如的方法形象地介绍它们，此时 大家要和前面讲到的专业解释对比阅读。介绍完理论，将通过实例来介绍定位的各知识点， 虽然实例不美，但每一则实例都是精心挑选的，如果要完整掌握 DIV+CSS 定位方法，请务 必弄懂每一个实例的原理。最后将会带大家做一个较为酷的综合实例。如果你想提高你阅读 本文的兴趣或者动力，你可以先跳到最后看综合实例的运行效果。 1.定位的专业解释 (1)语法 position:static|absolute|fixed|relative (2)说明 从上面语法可以看出，定位的方法有很多种，它们分别是静态(static)，CSS 绝对定位 (absolute)，固定(fixed)，CSS 相对定位(relative)。在这个教程里，我不逐一讲，只讲最常用 也是最实用的两个定位方法：CSS 绝对定位(absolute)、CSS 相对定位(relative)。 CSS 绝对定位(absolute)：将被赋予此定位方法的对象从文档流中拖出，使用 left，right， top，bottom 等属性相对于其最接近的一个最有定位设置的父级对象进行 CSS 绝对定位，如 果对象的父级没有设置定位属性，即还是遵循 HTML 定位规则的，则依据 body 对象左上角 作为参考进行定位。CSS 绝对定位对象可层叠，层叠顺序可通过 z-index 属性控制，z-index 值为无单位的整数，大的在最上面，可以有负值(目前负值 FF 不支持)。 

CSS 相对定位(relative)：对象不可层叠，依据 left，right，top，bottom 等属性在正常文 档流中偏移自身位置。同样可以用 z-index 分层设计。 2.定位的形象解释 我先来架设一个虚拟的场景：有一个矩形的房间，里面还有一个水桶装了些水，水里 还浸泡着一个西瓜，这个房间半空中还有不少的钩子用于挂东西用。现在我把网页元素与上 面物件对应上，那么房间就是一个网页，水桶是网页中的一个板块，桶中的水就是文本流， 西瓜就是将要被定位的对象。 (1)贡献的 CSS 绝对定位(absolute) 对照前面解释，如果西瓜被赋予 CSS 绝对定位，那么就等于把西瓜从水中捞起来挂 在半空中的钩子上，水桶中西瓜原来占用的空间水会自动填补它(CSS 绝对定位对象会让出 自己原先占用位置，所以说它是贡献的)。此时如果之前没有对水桶进行定位设定，那么被 拿起的西瓜位置不会再受水桶位置影响，水桶怎么移动，西瓜还是挂在原来位置，至于西瓜 要怎放，则以房间左上角(body 左上角)为准，用 left，right，top，bottom 值来定位。 但是如果水桶也给出了定位设置(通常是 CSS 相对定位，下面有讲到这一实用技巧)，此 时西瓜的摆放就没有那么自由了，尽管此时西瓜被拿起来了不会影响水桶中的水(文本流)， 但它还是要听桶的话，桶会告诉西瓜“你可以活动，但应该在我的范围内走动，比方说我要 你在我左上方 1 米处，你就要跟死这一点，我走你也要跟着走”，如果桶中有很多个西瓜， 可以全部拿出来吊到半空中，它们将被安排在不同高度的空间(层)，所以在房顶垂直往下看， 有可能看到不同西瓜层叠在一起的情况(这个所谓的高度在网页中是不存在的，就像 FLASH 动画中的不同层上安排了元素，但它们在看时不会有深度感觉)。可见 CSS 绝对定位的对象 参考目标是它的父级，专业称之为包含块。 (2)自私的 CSS 相对定位(relative) CSS 相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他 周围的诸如文本流之类的对象。CSS 相对定位也比较独立，做什么事它自己说了算，要定位 的时候，它是以自己本身所在位置偏移的(相对对象本身偏移)。再拿前边作比如来解，那么 此时西瓜似乎是有魔法的，如果西瓜通过 CSS 相对定位在水桶中偏移了你会看到一个现实 生活中不存在的现象：水中有一个地方水凹下去了，周围的水不能填补它，西瓜看起来在旁 边，如果搅动一下桶中的水，那个凹的位置会发现改变(文本流对 CSS 相对定位对象还存在 影响)，但是凹处到西瓜出现的距离始终保持一致。可见文本流与它之间还会互相影响，因 为对象并没有真正脱离文本流，就像有两个人在同一层楼水平移动的过程中会有碰头的机 会。 (3)总结两种定位的特征 

CSS 绝对定位就像是把不同对象安排到了一栋高楼的不同楼层(一般指不是第一层，我 们这里理解为文本流就放在首层)，它们互不影响，但是它们怎么移动与你楼的地基和面积 (父级)有关。CSS 相对定位指对象还是在首层楼与文本流一起存放，它们之间肯定存在影响。 (4)对特殊情况的补充 在用 CSS 相对定位和 CSS 绝对定位的时候，有一种情况是它们的定位值用到了负值则 对象可沿相反方向移动，刚才说到的把对象安排在一栋楼的不同层，如果某个对象一开始就 是背靠着最外边墙的，此时再用一个负值定位它，它就会神奇般地跑出墙外去了，当然现实 中可没有这种惊险而又神奇的事发生，本人只为了延用上面的比如作形象解释。