彻底弄懂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）

猜你喜欢

如何捕获人家站点的页面？

用JavaScript脚本实现的图灵机

什么是XSL?

Ewebeditor及fckeditork单引号的问题

汇总数据库备份还原压缩与数据库转移的方法

SQL Server导出表到EXCEL文件的存储过程

FrontPage 2000主页设计问与答

PHP生成饼图的示例代码

页面新开窗口的一点补充

屏幕分辨率和布局简述

也谈用户体验

网页布局的位置重心与位置间的对比关系

浏览器发送URL的编码特性

如何实现某一页面只让特定的用户浏览？

CSS网页布局避免滥用DIV元素

利用aspjpeg组件自动生成产品缩略图asp源代码

SQL 注入式攻击的终极防范

40个网页设计常用小代码

asp中获取内容中所有图片与获取内容中第一个图片的代码

自定义用于ASP Web站点的 SQL 7.0 数据库

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

猜你喜欢

如何捕获人家站点的页面？

用JavaScript脚本实现的图灵机

什么是XSL?

Ewebeditor及fckeditork单引号的问题

汇总数据库备份 还原 压缩与数据库转移的方法

SQL Server导出表到EXCEL文件的存储过程

FrontPage 2000主页设计问与答

PHP生成饼图的示例代码

页面新开窗口的一点补充

屏幕分辨率和布局简述

也谈用户体验

网页布局的位置重心与位置间的对比关系

浏览器发送URL的编码特性

如何实现某一页面只让特定的用户浏览？

CSS网页布局避免滥用DIV元素

利用aspjpeg组件自动生成产品缩略图asp源代码

SQL 注入式攻击的终极防范

40个网页设计常用小代码

asp中获取内容中所有图片与获取内容中第一个图片的代码

自定义用于ASP Web站点的 SQL 7.0 数据库

汇总数据库备份还原压缩与数据库转移的方法