理解绝对定位和相对定位布局（2）
作者：cyq 来源：webteam 发布时间：2009-03-19 13:53:00
2.仅使用margin属性布局相对定位元素的情况
用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。例如：margin-top:负值; margin-bottom:负值
图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。box1和box2物理空间没有改变，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。
层级关系为：
<div
<div box1 ——– position:relative ; margin-bottom:-102px;
<div box2 ——– position:relative ; margin-bottom:-102px; margin-left:110px;
<div box3 ——– position:relative ; margin-bottom:0px; margin-left:220px;
效果图：
图3
3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
此情况，它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成 偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。
图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加。(偏移量:80px = 110px - 30px)
层级关系为：
<div
<div box1 ——- position:relative ; margin-bottom:-102px;
<div box2 ——- position:relative ; margin-bottom:-102px;margin-left:110px; flet:-30px;
<div box3 ——- position:relative ; margin-bottom:0px; margin-left:220px;
效果图：
图4
0
投稿猜你喜欢
- 用于操作数据库的SQL一般分为两种，一种是查询语句，也就是我们所说的 SELECT语句，另外一种就是更新语句，也叫做数据操作语句。言外之 意
- 最近，我不得不对我的一个客户的旧网站进行更新，使得它能够达到可访问性的标准。对三四年前的旧代码进行挖掘的想法根本没有吸引力，主要是因为我曾经
- 本文介绍了两个asp实用的技巧，一是使用asp强制刷新页面，二是判断一个文件是否存在强制刷新网页 强制性刷新随机验证码 ，让随机验
- VBSCRIPT中的日期，时间，星期函数很丰富，给我们使用带来了很大的方便，我个人使用最多的就是用now（）来获取服务器的当前日期和时间。但
- 在添加新记录时，有时候我们需要将部分动态内容自动添加到指定的文本域，例如上传一个文件后，将文件名自动添加到一个独立的记录框内，以
- 这是早上找了点时间写了一个利用404错误达到静态态效果的类，准备在HTTP://PJSKIN.MYSUC.COM中使用的。不过现在没时间去弄
- DTD实际上可以看作一个或多个XML文件的模板，这些XML文件中的元素、元素的属性、元素的排列方式/顺序、元素能够包含的内容等，都必须符合D
- SWFObject的使用是非常简单的，只需要包含 swfobject.js这个js文件，然后在DOM中插入一些简单的JS代码，就能嵌入Fla
- 在大型的ASP项目中，很多的页面都涉及到分页、翻页功能。如果每个页面都写一个翻页的程序的话，这样的工作即降低了工作效率，也不利于工程的模块化
- 关于asp缓存函数，类什么的，在网上可以说笔笔皆是，为啥我要不辞辛苦去写一个呢？大概看了下，各有各的优点吧，可是大部分好像不可以缓存数据额，
- URL 编码是什么东东呢？看看我从网上抄的定义： 引用: url编码是一种浏览器用来打包
- 本节为读者讲解如何利用ADO.NET本身的参数对象和存储过程技术防止注入攻击，以达到用户界面输入与原始SQL的分离，使黑客无法拼接SQL语句
- 某些杀毒软件会把正常的asp文件误认为是asp木马文件，而自动删除，影响正常使用。下面方法可能会有效避免被杀毒软件删除把dim t
- 数据库连接：<％ set conn=server.createobject("adodb.connection&q
- 1.指向“开始->程序->Microsoft SQL Server 2005->配置工具->SQL Server 外
随着对Dreamweaver cs3中集成Spry功能的深入学习，了解并掌握到Spry框架的一些功能模块，其中就有通过Dreamweaver- 我们可用ADO STREAM来做一个无组件的上传程序。Stream对象包含了许多操作二进制和文本文件的方法，我们现在用Stream对象来操作
- 阅读上一篇：微软建议的ASP性能优化28条守则(2) 技巧 5：不要将数据库连接缓存在 Application 或 Session 对象中
- 代码如下:function checkip(checkstring)'用正则判断IP是否合法 dim re1 set re1=new
- xhtml+css页面制作过程中问题的解决方案，说是解决方案应该有点过了，充其量只不过是给刚刚开始学标准页面制作的朋友们的一些小建议，如果讲
