打印

[教程] 彻底弄懂CSS盒子模式四(绝对定位和相对定位)

webflash [楼主]

初级会员

帖子: 76
体力: 182
威望: 16
当前: 广东广州
离线: 245 天

1^# 大中小发表于 2007-4-3 19:44

彻底弄懂CSS盒子模式四(绝对定位和相对定位)

作者：唐国辉

1.彻底弄懂CSS盒子模式一(DIV布局快速入门) 【论坛讨论】
2.彻底弄懂CSS盒子模式二(导航栏实例) 【论坛讨论】
3.彻底弄懂CSS盒子模式三(浮动的表演和清除的自述) 【论坛讨论】
5.彻底弄懂CSS盒子模式五(定位强化练习) 【论坛讨论】

前言
在用CSS控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措，而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来，比如CSS相册等等，因此自己杂乱的网页与高手完美的设计形成鲜明对比，这在一定程度上打击了初学定位的网友，也在他们心目中形成这样的一种思想：当我熟练地玩转CSS定位时，我就已是高手了。不管你怎么想，我只希望下面的教程能让你更深入地了解CSS定位属性。
阅读建议
先说说我这篇教程的思路，这对于你在正真开始阅教程前是有很大帮助的。我的思路是这样的：先给出定位较专业化精炼的解释，接下来再用打比如的方法形象地介绍它们，此时大家要和前面讲到的专业解释对比阅读。介绍完理论，将通过实例来介绍定位的各知识点，虽然实例不美，但每一则实例都是精心挑选的，如果要完整掌握CSS定位方法，请务必弄懂每一个实例的原理。最后将会带大家做一个较为酷的综合实例。如果你想提高你阅读本文的兴趣或者动力，你可以先跳到最后看综合实例的运行效果。
1．定位的专业解释
（1）语法
position : static | absolute | fixed | relative
(2) 说明
从上面语法可以看出，定位的方法有很多种，它们分别是静态（static），绝对定位（absolute），固定(fixed)，相对定位（relative）。在这个教程里，我不逐一讲，只讲最常用也是最实用的两个定位方法：绝对定位（absolute）、相对定位（relative）。

绝对定位（absolute）：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位。绝对定位对象可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在最上面，可以有负值。

相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

回头一看，下面我搞的“西瓜模型”还真的够复杂，建议读者跳过“定位的形象解释”部分内容，否则被“西瓜”`砸晕头我不负责。如果你读过了又没有被“西瓜”`砸晕，那恭喜你，你已经具备刻苦学习精神了，挖哈哈...

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

3．实例强化对定位属性的理解
（1）无定位设置，对象遵循HTML定位规则。一般是子级不会跑出父级外边去（子级没有使用负边界情况），子级一般是靠在父级左上角的，父级放在最下层。

提示：您可以先修改部分代码再运行

（2）给设定了定位属性的对象指定left，right，top，bottom属性中的至少一个，不然定位不起作用。下面实例中虽然给box2设定了定位属性position: absolute，但是如果没有指定其中一个方位定位值top: 0px，定位是不发生作用的，你可以删除我注释的样式再测试效果进行前后对比。

提示：您可以先修改部分代码再运行

（3）绝对定位对象可以层叠，层叠顺序用z-index控制，如果没有指定则遵循其父对象的定位方法，就目前来说要做到不同浏览器正常浏览，最好不要给z-index指定负值，因为不同浏览器最终解释的效果有所不同，这是浏览器存在Bug引起的，为了解释这一现象，下面实例中的最底层图片我用到了负值，所以会出现在IE中可以看到3幅图层叠，而转到FF中你就只能看到两幅图层叠了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>绝对定位对象可以层叠,层叠顺序可用z-index控制,但最好不要用负值,因为FF不支持</title>
<style type="text/css">

</style>
</head>
<body>
<div class="box1"></div>
	<div class="box2"></div>
		  <div class="box3"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

（4）相对定位对象会占据它原来位置，在下面实例中，没有设定相对定位前，绿色小盒子是在蓝色盒子左上角的，之前也设定了绿色小盒子的浮动方式为左浮动，可以看到文本环绕在它右边，但是后来用相对定位方法把绿色小盒子重定位到外面去了，它还占着自己原来位置，因为你还可以看到文本流没有发生自动填补流动。因此这种直接的相对定位方法较少用，因为重定位对象后原来位置空了一块。相对定位常与绝对定位结合用，一般是给父级设定相对定位方式，子级元素就可以相对它进行方便的绝对定位了（请注意看后面的实例）。

提示：您可以先修改部分代码再运行

（5）相对定位的对象不可以重叠。这一点也许比较难理解，先来这样理解吧，因为相对定位的对像没有脱离文本流，就像两个还是住在同一层楼的人，任何时候，他们脚下踩的地方不可能被另一个人踩着的，如果可以就意味着两个人共享一块地方了。在下面的实例中，两个小盒子都刚好排在大盒子上方，所以在大盒子中输入的文字被挤到了下面。上面两个盒子我再用相对定位的方法对调了它们的位置，当前它们下方的空间其实不是自己的，也正因为它们没有重叠，所以盒子上方还是有两个盒子占用的空间，下面文字无法向上流动（我已对盒子设定了浮动属性的了，如果不设定，即使有空间文本也不会往上流，上面盒子是块级元素，会独立占据一行）。

提示：您可以先修改部分代码再运行

（6）高度自适应的妙用。在下面实例中，右边的紫色小盒子高度是没有设定的，它的高度是随着里面内容的增加而增高的，但我们又可以通过绝对定位方法把它始终定位在父盒子的右上角。同理，我们也可以只设定高度而让宽度自动随内容增加而变宽。

提示：您可以先修改部分代码再运行

[ 本帖最后由 webflash 于 2007-8-16 11:30 编辑 ]

忙

TOP

webflash [楼主]

初级会员

帖子: 76
体力: 182
威望: 16
当前: 广东广州
离线: 245 天

2^# 大中小发表于 2007-4-3 19:45

彻底弄懂CSS盒子模式四(绝对定位和相对定位)2

（7）给包含块一个高度，或者说给定位对象的父级设定一个高度。不然也许显示的结果并不是你想要的。在下面的例子中，如果你本意要实现下面效果：把小盒子在父盒子中的左上角垂直往下偏移，上方留出一块区域，如果你删除了box1的高度会怎么样呢？自己测试一下吧。

提示：您可以先修改部分代码再运行

（8）放置绝对定位对像到可视区外会出现滚动条。一般情况下，绝对定位是用来方便定位网页要看得见元素的，而不是拿它来隐藏对象的，一般隐藏对象常用到display与margin，如果你试图把绝对定位的对象移出可视区域，嘿嘿，浏览器会为你准备滚动条去看望它。

提示：您可以先修改部分代码再运行

（9）在IE6.0版本浏览器中，放置相对定位对像到可视区外不会出现滚动条。这应该算是IE的又一个Bug，在下面实例中，如果你缩小IE6.0浏览器窗口，相对定位的对象还会出现完全消失的情况呢。

提示：您可以先修改部分代码再运行

（10）定位的特殊值情况。如果定位设置是这样的：position:relative ，right:200px， left:10px会出现什么情况呢？一边叫对象向右偏移10px，另一边又叫对象向左偏移200px，到底是听那边的呢，还是那个先，那个后呢。针对这种矛盾情况，CSS规定只听左边的left，而右边怎么设置都被重定为-left,即-left =right。上下值top与bottom矛盾的话，就以top为准，所以在下面的实例中，你如何改变right的值，对象位置不会发生改变的。

提示：您可以先修改部分代码再运行

4．综合实例见证定位的魅力
先看最终演示效果，具体教程请继续关注，本人正抽空整理。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>相对定位和绝对定位实例--作者：唐国辉</title>
<style type="text/css">

</style>
</head>
<body>
<h3>最新单曲</h3>
<ul>
<li><a href="#">01 爱的文身 黄圣依<div><img src="http://bbs.blueidea.com/attachments/2007/8/20/20070820_4ea1320d2c0c5a90a4c7BPTs8Tl77QF8.jpg" alt="" />
<dl>
	<dd><span>歌名:</span>爱的文身</dd>
	<dd><span>歌手:</span>黄圣依</dd>
	<dd><span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。</dd>
</dl></div></a></li>
<li><a href="#">02 累了 阿信<div><img src="http://bbs.blueidea.com/attachments/2007/8/20/20070820_ad38e1a131550b16c591MnfWcJcqGUeT.jpg" alt="" />
<dl>
	<dd><span>歌名:</span>累了</dd>
	<dd><span>歌手:</span>阿信</dd>
	<dd><span>介绍:</span>青春校园偶像剧----【熱情仲夏】片尾曲</dd>
</dl></div></a></li>
<li><a href="#">03 漫漫 慢慢 阿朵<div><img src="http://bbs.blueidea.com/attachments/2007/8/20/20070820_a8691db28a4ded87df71JUuZDCNh1isj.jpg" alt="" />
<dl>
	<dd><span>歌名:</span>漫漫 慢慢</dd>
	<dd><span>歌手:</span>阿朵</dd>
	<dd><span>介绍:</span>阿朵抢听版最新单曲《漫漫 慢慢》让你认识阿朵柔情的一面，展现阿朵百变的风格。</dd>
</dl></div></a></li>
<li><a href="#">04 我怀念的 孙燕姿<div><img src="http://bbs.blueidea.com/attachments/2007/8/20/20070820_97a4035190a74f44a402gPsEhmegSrfC.jpg" alt="" />
<dl>
	<dd><span>歌名:</span>我怀念的</dd>
	<dd><span>歌手:</span>孙燕姿</dd>
	<dd><span>介绍:</span>令人感同身受的抒情歌，在故事性的架构中，有着平凡但又能扣人心弦的情感，是一首高度共鸣的抒情歌。</dd>
</dl></div></a></li>
<li><a href="#">05 听,花期越来越近 后弦<div><img src="http://bbs.blueidea.com/attachments/2007/8/20/20070820_466631eed779a42874a7nSHe0GleQQrA.jpg" alt="" />
<dl>
	<dd><span>歌名:</span>花期越来越近</dd>
	<dd><span>歌手:</span>后弦</dd>
	<dd><span>介绍:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd>
</dl></div></a></li>
</ul>
</body>
</html>

提示：您可以先修改部分代码再运行

5．延伸阅读
（1）详解定位与定位应用小毅蓝色理想
（2）由浅入深漫谈margin属性怿飞蓝色理想

[ 本帖最后由 webflash 于 2007-8-20 10:21 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

忙

TOP

webflash [楼主]

初级会员

帖子: 76
体力: 182
威望: 16
当前: 广东广州
离线: 245 天

3^# 大中小发表于 2007-4-3 19:48

上面综合实例其实还存在一些问题的，能纠正者不妨指出来

[ 本帖最后由 webflash 于 2007-4-3 20:18 编辑 ]

忙

TOP

blank

怿飞
版主

帖子: 2118
体力: 3168
威望: 115
当前: 浙江杭州
离线: 1 天

专长 前端制作,JS,WAP

4^# 大中小发表于 2007-4-3 20:25

先提部分建议，看了头晕晕的，还没看完，明天继续仔细看！

建议把西瓜的那个比方去掉，当然这是个人认为，因为那个例子元素太多，模型太复杂，当用一个复杂的例子去讲解另外一个复杂的概念时，或许只会适得其反。呵呵……

另外z-index的复杂IE和FF都识别，那为什么会有差别，那是IE的一个BUG，详细的关于z-index的问题我将在我的下篇帖子《z-index在IE中的迷惑》中详细讲解。

position:absolute的定位是相对于有定位属性的Containing Block进行定位的。

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

TOP

webflash [楼主]

初级会员

帖子: 76
体力: 182
威望: 16
当前: 广东广州
离线: 245 天

5^# 大中小发表于 2007-4-3 20:38

引用:

原帖由 blankzheng 于 2007-4-3 20:25 发表
先提部分建议，看了头晕晕的，还没看完，明天继续仔细看！

建议把西瓜的那个比方去掉，当然这是个人认为，因为那个例子元素太多，模型太复杂，当用一个复杂的例子去讲解另外一个复杂的概念时，或许只会适得其 ...

1.版主能不能帮忙帮把那个综合实例结构优化点

2.期待你的新作《z-index在IE中的迷惑》

忙

TOP

old9

高级会员

帖子: 543
体力: 827
威望: 87
当前: 安徽合肥

专长 网页设计,前端制作,AS

6^# 大中小发表于 2007-4-4 13:29

“...相对定位（relative）：对象不可层叠...”
问下这里说的对象不可层叠是指什么？

http://old9.blogsome.com 已被 GFW 封锁

TOP

webflash [楼主]

初级会员

帖子: 76
体力: 182
威望: 16
当前: 广东广州
离线: 245 天

7^# 大中小发表于 2007-4-4 14:01

引用:

原帖由 old9 于 2007-4-4 13:29 发表
“...相对定位（relative）：对象不可层叠...”
问下这里说的对象不可层叠是指什么？

引用:

relative :　对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

上面解释引用自苏昱《CSS2.0手册》，我想这里的不可层叠是指相对定位对象原来占有位置不可被另一个相对定位对象占用吧，是物理位置。

TOP

小毅

悟禅布衣
荣誉管理团队

帖子: 1115
体力: 1574
威望: 208
当前: 江苏南京
离线: 10 天

专长 网页设计,平面,前端制作

8^# 大中小发表于 2007-4-4 15:37

国辉这几期的文章整理得很不错，辛苦了，但是在这篇里有几个错误要更正一下：

“（5）相对定位的对象不可以重叠。这一点也……”
这是错误的，相对定位的对象的显示区，是完全可以重叠的！并且原有的区域一样可以被层叠。在这点上要尊重事实而不是相信权威！

“（9）放置相对定位对像到可视区外不会出现滚动条……”
这也是错误的，所有的定位对像的位移达到一定的数值后都会产生滚动条。并且第九条与第十条的例子并不是很能说明问题！

毅博客 玉振之

TOP

webflash [楼主]

初级会员

帖子: 76
体力: 182
威望: 16
当前: 广东广州
离线: 245 天

9^# 大中小发表于 2007-4-4 16:06

引用:

原帖由小毅于 2007-4-4 15:37 发表
国辉这几期的文章整理得很不错，辛苦了，但是在这篇里有几个错误要更正一下：

“（5）相对定位的对象不可以重叠。这一点也……”
这是错误的，相对定位的对象的显示区，是完全可以重叠的！并且原有的区域一样可以被层叠。在这点上要尊重事实而不是相信权威！

“（9）放置相对定位对像到可视区外不会出现滚动条……”
这也是错误的，所有的定位对像的位移达到一定的数值后都会产生滚动条。并且第九条与第十条的例子并不是很能说明问题！

1.“尊重事实而不是相信权威”，出此言者非高手才怪，向你学习。
2.（9）放置相对定位对像到可视区外不会出现滚动条，此现象会出现在IE浏览器中，FF中失效，所以此说法确实欠妥了，又是我相信权威的错

3.

引用:

相对定位的对象的显示区，是完全可以重叠的！

这是事实，我也没有否认。
4.

引用:

并且原有的区域一样可以被层叠。

此说法也可以说正确，用了绝对定位的对像就可以层叠在它们原来的物理位置上面。我的问题是两个用了相对定位的对象在相同的文本流中，就像上面第五条，在不用绝对定位的情况下，能让两个小盒子层叠在一起，并让出一边的空间来让文字环绕吗？

TOP

blank

怿飞
版主

帖子: 2118
体力: 3168
威望: 115
当前: 浙江杭州
离线: 1 天

专长 前端制作,JS,WAP

10^# 大中小发表于 2007-4-4 17:32

继续加油，虽然你的这篇文章我读到一半没读下去（其余的文章都是读完给评语再评分），都是你文中的西瓜让我吃多了，害我拉肚子了！

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

TOP

leebay0427

扶不起的阿斗
初级会员

帖子: 63
体力: 129
威望: 0
当前: 陕西西安
离线: 3 天

11^# 大中小发表于 2007-4-5 15:48

9楼指的应该是在IE6中吧,,在IE7中也是失效的.IE7是越来越接近标准的了.我觉得现在不能笼统地指IE浏览器了,IE6与IE7也是有很多区别的,应该跟具体地指出来吧?

TOP

aoao

地狱之歌
荣誉管理团队

帖子: 266
体力: 379
威望: 24
当前: 北京海淀区
离线: 1 天

专长 前端制作,产品设计

12^# 大中小发表于 2007-4-6 03:53

前天因为太忙跟文章看起太累合并完后就跑去睡觉，并没有全看完。
>_< 据说我很不负责。。
因为那时怿飞跟小依依两个版主也了在场看着。
那时已经快九点了，我赶着要睡觉。所以所以。。。。
刚才不小心看到蓝色的tech出现你的文章时才记得文章好像还有些问题。

Firefox2 距离标准还有一定的距离，不过比IE好很多。。
z-index是可以使用负值.
这个是我前天看到的。还有一些问题那时我也在群里说了。
有些怿飞也已经提到了。。
Firefox的负值测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>负的z-index在FF</title>
<style type="text/css">

</style>
</head>
<body>
<div class="box1"></div>
	<div class="box2"></div>
		  <div class="box3"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

PS :文章刚才想看完依然没有耐心看完。
除了自己现在时间太紧是主要原因外，文章的写法也太不好。
或者说文章的一部分就像测试文档。
看的人不一定有跟写的人一样的耐心

不知道怿飞看完了没。。小依依估计没耐心看完，他把我的坏习惯都学会了。
想一下，如果连我们出于责任地在看都没耐心一次看完，那别人呢？

写文章~在质不在量，你出文章的速度太快了，
除非你是职业写手，希望你不是，我已经开始后悔了。
我们一般写一篇像样的文章都要花上的时间是2天到一个星期左右，或者更久。
怿飞在整理的z-index已经好几个星期了。
我手上的一篇面向对象的CSS已经长达几个月，
不过我的是没时间写完，我现在在写更重要的东西，等全部完成了再暴光。

希望我说的不会打击到你写文章的热情。。我先写作业去。

BTW:苏昱《CSS2.0手册》里的一些说法并不完全，要考虑一下当时的情况，那时别说Firefox，mozilla都没多少人去理，那本手册更多的是针对IE。

[ 本帖最后由 rotui 于 2007-4-6 04:00 编辑 ]

嗷嗷囩：珍惜生命远离Firefox

TOP

webflash [楼主]

初级会员

帖子: 76
体力: 182
威望: 16
当前: 广东广州
离线: 245 天

13^# 大中小发表于 2007-4-6 14:33

引用:

原帖由 rotui 于 2007-4-6 03:53 发表
前天因为太忙跟文章看起太累合并完后就跑去睡觉，并没有全看完。
>_< 据说我很不负责。。
因为那时怿飞跟小依依两个版主也了在场看着。
那时已经快九点了，我赶着要睡觉。所以所以。。。。
刚才不 ...

1。我的教程出的确实太快了，不过没有办法，本人没有什么空，但是很多网友又要求我要出续篇教程，请见本人第一篇教程DIV布局快速入门的评论，无论是在论坛内部还是在蓝色理想的内容系统tech的评论都很高，出于回报网友的热情与支持就抽空出了些，现在已算出的差不多了，接下来要忙自己的了

你也有看到我签名了吧

至于说我是不是职业写手，那当然不敢当，只是曾经担任过《小小说》杂志的特邀通讯员，不过那时写的东西不像这些学术教程，也算是拉不上关系。

2。至于说你的评论会不会打击我的写作热情，那是完全不会的，悉听教诲努力提高自己的水平是我的目标，恰恰你就是我达到目标的一位指路人，我感激还来不及呢。

3。关于这篇定位的教程，本人也觉得确实有点乱了，本来打比如是由第一篇教程的成功获得的启示，然而没有想到这篇教程的比如模型太复杂了，连自己都不能操纵自如

4。一般评分的教程很快会被收录到内容系统，这样让我了解到你们负责人是多么努力的，在此要感谢温馨的蓝色理想给我一个家，也代表广大网友向你们这些默默工作的版主负责人等表示深深的敬意。

5。接下来本人要走开一阵子先，如果版主们发现我的教程有什么问题，可自行修改指正，尊重网友所学知识比尊重作者著作权更重要

忙

TOP

209du

初级会员

帖子: 52
体力: 112
威望: 0
当前: 广西桂林

发短消息

14^# 大中小发表于 2007-5-20 20:07

请问绝对定位中bottom:100px 和相对定位中bottom:100px 的区别

绝对定位中的bottom:100px 是不是以父级容器的底部边框为基准向上移动100px;

相对定位中的bottom:100px 文档流中的原位置向上移动100px;

要对对象A(长和高都是100px)置于容器的右下角,是否应该是
position:absolute;
right:100px;
bottom:100px;

TOP

artron

初级会员

帖子: 172
体力: 65
威望: 2
当前: 北京朝阳区
离线: 3 天

15^# 大中小发表于 2007-5-20 23:27

好文章顶

TOP

lovewowo

新手上路

帖子: 14
体力: 34
威望: 0
离线: 402 天

发短消息

16^# 大中小发表于 2007-5-21 14:02

顶，就需要这方面的，同时也期待着版主的新作

TOP

Spicegirl

Spicegirl
中级会员

帖子: 243
体力: 433
威望: 0
离线: 62 天

发短消息

17^# 大中小发表于 2007-6-1 16:07

好文章啊，谢谢楼主。

TOP

WXYCooL

初级会员

帖子: 73
体力: 131
威望: 0
当前: 江苏南京
离线: 2 天

专长 前端制作,JS,PHP

18^# 大中小发表于 2007-6-13 11:30

终于看完了~想说说偶的看法~

楼主,当读完这一篇教程和评论后~我更深层的理解了绝对和相对对层的控制~

对你这几篇的教程学习甚多~对楼主的文笔也相当佩服~

但这一篇教程是我读的最累的一篇~包括上一篇,昨天晚上硬是读到了1点多钟~看差不多才睡了~

楼上的版主也大概说了些~我想以一个初学者向提建议~删除什么西瓜不西瓜的~实在让人受不了~

那段文字占用了读整个文章的50%的时间还是没搞懂~就像版主BLANK所说的，有时候初学者在看时，不但没有理解“西瓜模型”还搞的一头污水，很难读下去~

反复看了几遍后，再来理解西瓜，里面的语法矛盾不少。。至今不能理解~可能再读它时，我不会束缚于这个“西瓜模型”

最后再次感谢楼主的文章和版主对文章的“注释”，也希望各位网页制作有一定经验的人给我们这些菜鸟一些“捷径”

PS：偶语言表达实在是有问题！

WXYCooL.CN

TOP

cinhoo

新手上路

帖子: 5
体力: 13
威望: 0
离线: 339 天

发短消息

19^# 大中小发表于 2007-8-14 23:25

看完了...还是很感谢LZ...
另外(9)例在IE7中确实是有滚动条的

TOP

zbm2001z

宝儿
荣誉管理团队

帖子: 1446
体力: 3791
威望: 41
当前: 北京昌平区

专长 网页设计,Flash,JS

20^# 大中小发表于 2007-8-15 01:28

引用:

原帖由小毅于 2007-4-4 15:37 发表
国辉这几期的文章整理得很不错，辛苦了，但是在这篇里有几个错误要更正一下：

“（5）相对定位的对象不可以重叠。这一点也……”
这是错误的，相对定位的对象的显示区，是完全可以重叠的！并且原有的区域一样可以被层叠。在这点上要尊重事实而不是相信权威！

“（9）放置相对定位对像到可视区外不会出现滚动条……”
这也是错误的，所有的定位对像的位移达到一定的数值后都会产生滚动条。并且第九条与第十条的例子并不是很能说明问题！

晕，这个错误不小啊！

这里的相对定位的对象是不可“层叠”，不是“堆叠”（即所谓的“重叠”），先了解下基本概念吧，不要新人入门就受误导了。

“层叠”和“堆叠”的关系和区别——是CSS中盒模型理论的一块基石。

后者（9）在CSS2标准中（19980324版和19980512版），找不到这个定义，更谈不上权威。

相反，在CSS2.1标准中（20061106版和20070719版），与此相关的定义倒是很明确的（可能就是防止对标准的理解产生歧义）：
However, if relative positioning causes an 'overflow:auto' or 'overflow:scroll' box to have overflow, the UA must allow the user to access this content (at its offset position), which, through the creation of scrollbars, may affect layout.

[ 本帖最后由 zbm2001z 于 2007-8-15 02:25 编辑 ]

TOP

chen231133

新手上路

帖子: 9
体力: 25
威望: 0
当前: 福建福州

发短消息

21^# 大中小发表于 2007-8-26 11:56

复制内容到剪贴板

代码:

将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位。”

　　读到强化例3的时候，对上面这段话理解产生偏差：依据body对象左上角作为参考，这里左上角应该是margin-left,margin-top:150px吧？实际效果却是margin-left,margin-top:10px？

[ 本帖最后由 chen231133 于 2007-8-26 12:29 编辑 ]

TOP

lenovo717

新手上路

帖子: 3
体力: 11
威望: 0
离线: 228 天

发短消息

22^# 大中小发表于 2007-9-3 09:51

真是好文啊，谢谢楼主了

TOP

14px

秋末
高级会员

帖子: 244
体力: 509
威望: 0
当前: 湖南长沙
离线: 1 天

专长 网页设计,UI,前端制作

23^# 大中小发表于 2007-9-12 20:47

今天在论坛上与cutsin讨论了一番，又发现这个帖子，我觉得我应该把自己的讨论结果也整理一下发在这里，补充一下楼主精彩的教程。

楼主在第4点中说道：

引用:

相对定位常与绝对定位结合用，一般是给父级设定相对定位方式，子级元素就可以相对它进行方便的绝对定位了（请注意看后面的实例）。

1. 一般情况下，绝对定位的对象设置了top或left，就会基于其父体的位置产生距离而得到定位。请看演示：

提示：您可以先修改部分代码再运行

2. 一旦在其父体之外再加上一层，浮动对象的参照位置，在默认情况下将是其父体的父体。请看演示：

提示：您可以先修改部分代码再运行

3. 依次类推，浮动对象的定位，将基于离它最远的父体的位置。请看演示：

提示：您可以先修改部分代码再运行

4. 那么，如果我们要使浮动对象按照自己指定的对象为参照来定位，则需要在这个指定对象上加上：position:relative。请看演示：