<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" >
.c1{ position:absolute; width:400px; height:400px; border:1px #0000FF solid;}
.c2{position:relative; top:500px; background:#0099FF;border:1px #0000FF solid;width:120px; height:120px;}
.c3{position:relative; background:#00CC00;border:1px #00CC00 solid;width:120px; height:120px;}
</style>
</head>
<body>
<div class="c1">
</div>
<div class="c2">
</div>
<div class="c3">
</div>
</body>
</html>
relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。这就是绿色块为什么在这里，而不是跑到蓝色块下面了，因为蓝色块在没有top时，就在绿色块的上面，绿色块一直呆在老地方
</div>
<div class="c2">
</div>
<div class="c3">
</div> 如果改为这样，效果还是一样的。因为absolutely的都脱离了文档流。
<!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" >
.c1{ position:relative;改为absolute也一样 width:400px; height:400px; border:1px #0000FF solid;}
.c2{position:absolute; top:500px; background:#0099FF;border:1px #0000FF solid;width:120px; height:120px;}
.c3{position:relative; background:#00CC00;border:1px #00CC00 solid;width:120px; height:120px;}
</style>
</head>
<body>
<div class="c1">
<div class="c2">
</div>
<div class="c3">
</div>
</div>
</body>
</html>
时效果
因为absolutely的都脱离了文档流。
6102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
