位置：首页>> 网络编程>> 网页设计>> 彻底弄懂CSS盒子模式之四（绝对定位和相对定位)（3）

彻底弄懂CSS盒子模式之四（绝对定位和相对定位)（3）

作者：唐国辉　来源：蓝色经典　发布时间：2007-05-11 16:51:00　

标签：绝对定位,相对定位

（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="https://img.aspxhome.com/file/UploadPic/20075/2007511165213375.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="https://img.aspxhome.com/file/UploadPic/20075/2007511165215966.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="https://img.aspxhome.com/file/UploadPic/20075/2007511165215580.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="https://img.aspxhome.com/file/UploadPic/20075/2007511165215876.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="https://img.aspxhome.com/file/UploadPic/20075/2007511165216169.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属性怿飞蓝色理想

第一页上一页 1 2

投稿

彻底弄懂CSS盒子模式之四（绝对定位和相对定位)（3）

猜你喜欢