(065)css_position_relative 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>layout_relative.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        span {border:1px solid red;}    
        div {
            width:300px;
            height:300px;
            border:1px solid blue;
            position: relative;
            left: 100px;
            top:100px;
        }
    </style>
  </head>
  
  <body>
        <div id="div1">div</div>
        <span>span</span>
  </body>
</html>

 

层模型--相对定位

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

posted @ 2015-01-27 14:11  雪中飞雁  阅读(275)  评论(0)    收藏  举报