聂文文学习笔记-css定位

阅读数：1508 发布时间：2016-05-29 09:51:48

作者：zzl005 标签： 聂文文 css 委培班 w1

几种基本的定位

position

static默认的定位方式

实例：
html代码：

    <!DOCTYPE html>  
    <html>  
      <head>  
        <title>position.html</title>    
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
        <link rel="stylesheet" href="ex2.css" type="text/css"></link>  
      </head>    
      <body>  
        <div class="box">一</div>  
        <div id="move" class="box">二</div>  
        <div class="box">三</div>  
      </body>  
    </html>

css代码

    .box{  
        width: 300px;  
        height: 200px; 
        background-color: gray;  
        border: 2px solid black;  
        /*float: left;  */
        margin-left: 10px;  
    }

运行结果：

relative相对定位

css部分代码

    .box{  
        width: 300px;  
        height: 200px; 
        background-color: gray;  
        border: 2px solid black;  
        float: left;  
        margin-left: 10px;  
    }    
    #move{  
        position: relative;/*相对定位,left意思是在原来的位置向左移动,但会保留原来的位置*/  
        left: 40px; 
        top: 100px;  
    }

运行结果

absolute绝对定位

css部分代码

    .box{  
        width: 300px;  
        height: 200px; 
        background-color: gray;  
        border: 2px solid black;  
        float: left;  
        margin-left: 10px;  
    }  
    #move{  
        position: absolute;  
        left: 40px; 
        top: 100px;  
    }

运行结果