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值为无单位的整数，大的在最上面，可以有负值（目前负值FF不支持）。
相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

2．定位的形象解释

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

分析实现方法

1．从上面的截图可以看到有一标题，标题下面是一个列表，所以很容易想到用<h>标签和无序列表<ul><li>来做结构，标题是一块有背景的矩形块，文字白色，文字在矩形块中居中对齐，所以给<h>标签加个宽度控制，最后为了让文本看起来在垂直方向上居中，再加个上边填充，所以用到下面样式：

h3 {
    color: #FFF;
    background-color: #F90;
    width: 100px;
    padding-top:3px;
    text-align:center;
}

2．下面是一个<ul>区块，我让它有一个上线框，这样与标题吻合在一起就做出了标题效果，而<ul>里面的<li>要有一条下划线，以形成一种分行效果，于是用到下边框，这里用到下面样式：

ul {
    width: 300px;
    border-top: 1px solid #F60;/*使其上边有一线条，与标题h3吻合*/
}
ul li {
    padding:5px;
    border-bottom: 1px solid #CCC;
    list-style:none;/*去除列表样式，这对于标准浏览器很重要*/
}

3．列表中的链接文字点击效果就很简单了，大家自己看代码就行了，注意一点就是用到了下列一条样式：

a {
position: relative;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/
display:block;/*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/
}

4．组织信息面板布局（实现的显示与隐藏效果放在后面再说）。信息面板为一个有浅蓝色背景和较深蓝色边框，并且有5px填充的盒子，盒子左边安排一幅图片，图片大小用CSS控制，图片右边为一个有清晰数据结构列表，为了不出现与前边父级<li>的重复使用（不然等一下CSS样式控制会较麻烦，因为内部的<li>会继承父级的样式，除非你又要新定义一则样式来逐一清除父级带给它的样式），所以我用到<dl><dd>结构，只设定<dl>一个宽度，高度不设定，让其高度随说明文字增多而增高，同时不用绝对定位，以便让它可以把父级撑高，然后并让它浮动到右边。而信息面板中的图片则用绝对定位方法把它定位在信息面板左上角，用5px偏移做到与父级5px填充一致，这样看起来会自然点。当然也许你认为还有很多简单的方法可以实现，比如：让图片左浮动，而且再让<dl>浮动就行了，此方法测试表明在IE中能正常显示，在FF中会有问题，因为我本意要让右边说明文字从上到下直列下来，当文字高过图片时，不能出现文字环绕图片的情况，恰好这种情况出现在FF中（因为<dl>是在正常文本流中，而左侧图片又用了左浮动，所以问题出现），所以再想到让<dl>右浮动，但此时图片在正常文本流中又不能放到左上方了，既然浮动会影响到<dl>内的文本流，那么就用绝对定位让其脱离正常文本流，但是问题又来了，这时它无法做到让父级高度自适应。所以最后想到图片是固定在信息面板的左上角的，就把它绝对定位，再让<dl>浮动到右边去，结果发现这个方法还行，用到下面样式：

a:hover div {
    position: absolute;
    padding:5px;
    display:block;
    width: 245px;/*只给出宽度，高让它随内容多少自动调整*/
    left:150px;/*这是相对父级A的定位*/
    top: 20px;
    border: 1px solid rgb(91,185,233);
    background-color: rgb(228,246,255);
    z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/
}
a img {
    width:80px;
    height:80px;
    border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/
    display:block;
    position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/
    top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/
    left:5px;
}
dl {
    width: 160px;
    float:right;
    color: #999;
    line-height:20px;
}
dl dd span {
    font-weight: bold;
    color: #639;
}

5．实现隐藏与显示效果。这个隐藏显示效果是由鼠标触发的，所以要自然想到链接A（因为现在我们是用CSS实现，你不要想到用javascript），并且要把信息面板安排在<a></a>内，因为到时就可以用CSS类型选择符配合样式的a:hover伪类控制其显示和隐藏了。另外一个很重要的问题是IE7以下版本有个A状态伪类BUG，这个BUG使你本来看似没有问题的CSS设置在IE中之前被隐藏的面板无法显示出来，这里用到一个常用的方法，加一条样式：a:hover {background:#fff;}以消除存在问题。

（1）让信息面板初始状态隐藏，用到样式：

a div {
display: none;/*初始化信息面板不显示*/
}

（2）显示面板，用到样式：

CSS盒子模式之四 - 绝对定位和相对定位相关推荐

Web前端基础知识：CSS盒子模型、绝对定位和相对定位
一:CSS盒子模型 CSS盒子模型概念:CSS盒子模型包含了内容(content).内边距(padding).边框(border).外边距(margin).宽度(width).高度(height)几个 ...
CSS 盒子模型，绝对定位和相对定位
盒子模型什么是盒子模型在HTML文档中,每个元素都有盒子模型.由外到内分别为最外边距区域(margin area),边框区域(border area),内边距区域(padding area)和内容 ...
彻底弄懂CSS盒子模式一(DIV布局快速入门)
彻底弄懂CSS盒子模式一(DIV布局快速入门) 作者:唐国辉实例网页网址:http://www.blueidea.com/articleimg/2007/03/4545/css2.ht ...
css盒子教程,彻底弄懂css盒子模式(div布局快速入门)_css教程
实现结构与表现分离在真正开始布局实践之前,再来认识一件事--结构和表现相分离,这也用CSS布局的特色所在,结构与表现分离后,代码才简洁,更新才方便,这不正是我们学习CSS的目的所在吗?举个例来说P是 ...
html div css盒子,CSS盒子模式一(DIV布局快速入门)_html/css_WEB-ITnose
中心最新招了几十个人,我也成小旋风了,看来这个山头还得呆几天.毕竟有几十口子人哪,咋能撒手不管啊!我就先发个贴热热身!也希望前几届的师哥师姐多多指教. 我们在网页设计中常听的属性名:内容(conte ...
关于css盒子模式取色和获取像素
在网页构建css盒子模型的过程经常需要用到取色工具和像素提取,总结了几种简单的方法如下: ps自带取色器取色.获取像素px 用qq截图进行取色并测量px 如下图: 还是以知乎登录界面为例,取色目标为鼠 ...
html盒子全部蓝色,彻底弄懂CSS盒子模式之五
三.分析实现方法 1．从上面的截图可以看到有一标题,标题下面是一个列表,所以很容易想到用标签和无序列表来做结构,标题是一块有背景的矩形块,文字白色,文字在矩形块中居中对齐,所以给标签加个宽度控制,最 ...
CSS设置DIV的绝对定位和相对定位
首先不给div设置定位,看看他们在网页中的位置代码如下 <!DOCTYPE html> <html><head><meta charset="UT ...
CSS position 属性：绝对定位与相对定位，以及浮动
以前一直很模糊定位原理,以为absolute与relative必须配合使用,使用absolute必须父标签必须设置为relative. 可能的值:absolute,fixed,relative,sta ...

CSS盒子模式之四 - 绝对定位和相对定位

CSS盒子模式之四 - 绝对定位和相对定位相关推荐

最新文章

热门文章