彻底弄懂CSS盒子模式之四 - 网页制作

　彻底弄懂CSS盒子模式之四

作者：webflash　时间： 2007-04-04　文档类型：原创　来自：蓝色理想

第 1 页绝对定位和相对定位 [1]
第 2 页绝对定位和相对定位 [2]
第 3 页绝对定位和相对定位 [3]

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

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

（9）放置相对定位对像到可视区外不会出现滚动条。此现象很好理解，因为相对定位对象原来位置没有变，原来位置没有出去滚动条就不会出现。在下面实例中，如果你缩小浏览器窗口，相对定位的对象还会出现完全消失的情况呢。

（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://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.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://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.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://imgcache.qq.com/music/photo/singer/61/singerpic_6361_0.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://imgcache.qq.com/music/photo/singer/9/singerpic_109_0.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://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg" alt="" /> <dl> <dd><span>歌名:</span>花期越来越近</dd> <dd><span>歌手:</span>后弦</dd> <dd><span>介绍:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd> </dl></div></a></li> </ul> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

5．延伸阅读

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

经典论坛讨论：
http://bbs.blueidea.com/thread-2733320-1-1.html

本文链接：http://www.blueidea.com/tech/web/2007/4601.asp　

出处：蓝色理想
责任编辑：moby

◎进入论坛网页制作、网站综合版块参加讨论

相关文章

彻底弄懂CSS盒子模式之五

作者文章

彻底弄懂CSS盒子模式之一

站点最新

站点最新列表

HTC Sense 体验与体验背后的故事

我希望能再"大气"一些

通过shtml实现重构页面模块化构建

如何设计新手用户引导

27个超漂亮的信息图表

商业产品色彩体系

Treehouse融资60万美元

Solve Media用广告代替验证码

互联网产品"冷启动"问题浅析

用户体验的价值

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule