浅谈position:relative 

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
    *{margin:0;padding;0;}
    .main{overflow:hidden;position:relative;height:200px;}
    .box{width:5000px;position:absolute;height:200px;background:#f40;top:0;left:0;}
    ul li{float:left;display:inline;width:98px;border:1px solid #f40;}
    .li1{left:500px;position:relative;}
    
    </style>
</head>
<body>
<div class="main">
    <div class="box">1</div>
</div>
<ul>
    <li class="li1">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>    
</body>
</html>

一个Element用了position:relative，会占用空间，并能“漂浮”到其他位置

posted @ 2012-09-01 18:22  夜雨_Jason  阅读(403)  评论(0)  编辑  收藏  举报