absolute与relative

shake863

浏览: 664475 次
性别:
来自: 北京

最近访客更多访客>>

morelily

u012363178

集xx

zxf_noimp

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

IE XHTML CSS HTML 浏览器

见到网上有解析 absolute与relative 力帖子，感觉说的不够明白，自己再整理一下。

1:
     如果position的父级(紧挨着的级)或祖父级...没有出现position的话，就以浏览器的左上角为为参照点
2:
   absolute只以，最近的父级，有position定义的，div块的左上角，为参照点
   relative只以，最近的父级，不管有无position定义的，div块的正文左上角 ,（即当该div没有positon时的位置）为参照点
3:
    同一级别的div，由于TLBR取值不同，会出现层叠现象，加上z-index就可以调整显示的
顺序值大的在最上层（注意z-index 是会继承的，在一个z-index很小的父级中，是先按父级的z-index来处理的）

ps: 当某个div以absolute 定义了，一定要写好top 和 left 属性，ff和ie默认的情况是不一样的。

给出一段代码，大家可以试一下

<!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>CSS--Position</title>

<style>
#box1{
/*position:relative;*//*由于父级没有position定义，box1就以页面的左上角为参照点*/
width:200px;
height:100px;
background-color: #00cc00;
padding:10px;
top:50px;
left:100px;
}

#box{
position:relative;/*由于父级没有position定义，box1就以页面的左上角为参照点*/
width:200px;
height:100px;
background-color: #00cc00;
padding:10px;
top:50px;
left:100px;
}


#boxb{
position:relative;/*由于父级没有position定义，box1就以页面的左上角为参照点*/
width:400px;
height:200px;
background-color: #00cc00;
padding:10px;
top:50px;
left:100px;
}

#first{
position:absolute;/*相对于最近的，有position定义的，父级元素box1的，左顶点，为参照点*/
top:0px;
left:0px;
width:120px;
background-color: #00CCFF;
}
#second{
position:relative;/*本对于紧挨着的，父级(box1)的，正文(box有padding定义)的，左顶点，为参照点*/
top:10px;
left:10px;
width:120px;
background-color: #FFFF66;
}
</style>

</head>

<body>
<div id="box">Box正文

</div>


<div id="boxb">
<div id="box1">Box正文
<div id="first">First</div>
<div id="second">Second</div>
</div>
</div>

</body>
</html>

分享到：

clear:both | 对 pthread_cond_wait 的错误理解

2008-08-29 15:05
浏览 966
评论(2)
查看更多

2 楼 shake863 2008-09-13

1 楼 yunfeiyang 2008-09-10

position

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论