理解绝对定位和相对定位布局（4）
作者：cyq 来源：webteam 发布时间：2009-03-19 13:53:00
标签：css,布局,相对定位,绝对定位,网页重构
2.仅使用margin属性布局绝对定位元素的情况
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
图9中，使用margin属性布局相对定位元素。
层级关系为：
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果图：
图9
IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。
层级关系为：
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果图：
图10
0
投稿猜你喜欢
- 译者按：我们时常能看到不同JavaScript库/框架之间的各种比较，但这次 YUI3 架构师和 jQuery 之父的直接对话却非常难得，也
- 长话短说，看这个 form 元素：<form method="post" action=&qu
- http://validator.w3.org/#validate_by_upload 在线校验网址点浏览，上次找到自己做的页面
- 如何在SQL2000的查询中使用XML-Data？具体程序如下：orders.asp<％@ Language=VBScrip
- Wordpress 2.6.2 出来了，今天将网站程序从2.6升级上来，比较了一下2个版本的代码，发现2.6的版本中的代码还有几个地方出现了
- 其实这里的静态页面并不是真正意义上的静态，但可以达到了静态页面的解析效率，还未经项目测试，拿来分享。代码如下:<％ Cons
- jQuery的makeArray有其局限性（1.3.4还有bug），我自己实现了一个，不过涉及N多辅助方法。var dom = {},_to
- 如何显示一个等待或欢迎信息？ <％ Response.Buffer = True ％
- 如何做一个只能从本站点才能访问的页面？可以用与防止盗链<％if left(Request.ServerVariables(&
我们在工作中经常强调沟通能力，和产品、开发、测试等不同角色的人需要沟通，和领导、同事需要沟通，沟通是一个双向的过程，而沟通首先需要双方有良好- 这个绝对是IE6的bug。我想要达到的是如下的效果。通过三个div，排布好侧栏和内容区。我用了如下的css：<style type=&
- 最近因工作需要，要在静态页面上实现分页，想了下，决定用AJAX来实现，所以就捣鼓了下面这么个东西，截图如下：更多关于分页的文章演示地址：ht
- 因工作需要，要将存放在sql server数据库中的数据全部导入到mysql数据库中，在网上搜集相关资料，找到两种方法，现在分别谈谈对他们的
- Wingdings字体，Symbol字体<html> <head> <title>
- 今天偶尔在一个学习网站技术的地方看到一个教程，关于html代码的，刚看到咱常用到的视频播放器html标签Object，平时用到他的时候都是为
- 静态页面由于其稳定性快速性，的确给SE、用户及站长带来了方便。但有时，需要记住用户的信息，如用户留下评论后，下一次再来，就要记住该用户的信息
- 内容摘要：MySQL易学易用，附带丰富的技术文档，这两个因素使之被广泛应用。然而，随着MySQL发展加快，即使一个MySQL老手有时也会为该
- 如何将产生的密码记录并发送给用户？这里使用了cdonts邮件组件来发送邮件，前提服务器得支持cdonts组件。好了，看看具体实现方法吧，不是
- 在windows下的解决办法如下： 1.net stop mysql 停用服务 &
- 在网上查找大量资料，经过自己的不懈努力，终于测试成功了。原来要在服务器上安装mysql odbc 3.51 ，还有数据库用户名及密码，用下面
