relative的right和absolute的right有何区别

renzaijiang 2009-09-19 12:06:37



<!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>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script language="javascript">

function popBox(id,closeid)

{

 $("#"+id).animate({right:"0px"},"normal",function(){$("#"+closeid).attr("class","close"). text('-')});

}

function closeBox(id,closeid)

{

 $("#"+id).animate({right:(-($("#"+id).width()-$("#"+closeid).width()))+"px"},"normal",function(){$("#"+closeid).attr("class","open").text('+')});

}

window.onload=function()

{



$("#kong").height($("#abc").outerHeight());

$("#tit").click(

function()

{

if

($(this).attr('class')=="open") popBox('abc','tit')

else closeBox('abc','tit');

});

window.setTimeout("popBox('abc','tit')",1000);

}

</script>

<style type="text/css">

<!--

#abc {

	border: 1px solid #fff;

      position:absolute; /*  position:relative; */

	height: 150px;

	width: 220px;

        right:-100%;

        background-color:red;

	

}

#abc #tit {

	background-color: #0066FF;

	position: relative;

	height: 100%;

	width: 20px;

	color: #FFFFFF;

	text-align: center;

	float: left;

}

#kong {

        background-color:yellow;

	position:relative;

	width: 100%;

        top: 100px;

	right: 0px;

        overflow:hidden;

	

}

.right {

	float: right;

	width: 190px;

	padding: 5px;

}

-->

</style>

</head>

<body style="margin:0px;">

<div id="kong">

 <!--浮动框-->

 <div id="abc">

   <div id="tit" class="close">-</div>

   <div class="right">

<a href="#">网页上从右边缓缓弹出的广告框效果</a></div>

 </div>

</div>

<h1>1秒后弹出！！！</h1>



</body>

</html>

上诉代码可运行就是注释部分 abc用相对定位就不行了是不是ie的 bug
我是ie6

...全文

103 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

mbh0210 2009-09-19

打赏
举报

static : 　无特殊定位，对象遵循HTML定位规则
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
fixed : 　IE5.5及NS6尚不支持此属性

BeenZ 2009-09-19

打赏
举报

绝对定位absolute 就是不管你其他层的位置，他放哪就是哪，left和top是多少就在页面哪个位置显示，是针对整个页面

相对定位 relative 的意思是相对于同一层次上的层来定位，比如同一层上有一个div 的left是10，然后你再定义一个相对的left=10,那他其实是在left=第一个div的left+第一个div宽度+10

你说的这个“bug”,是IE6 相对定位属性的一个bug，IE7下测试是没问题的