定位

绝对定位absolute：父级没有定位时时，相对文档定位，脱离文档流，提升层级
相对定位relative：
固定定位：fixed：
没有（默认）定位static：
只要有定位，就可以使用扩展样式
left right top bottom

绝对定位（absolute）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                padding: 0px;
                margin: 0;
            }
            div{
                width:100px;
                height:100px;   
            }
            .box1{
                background: #000000;
            }
            .box2{  
                background: #0000FF;
                   position: absolute;
                left:100px;
            }
            .box3{
                background:#640045;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>    
    </body>
</html>

相对定位(relative)

 <!DOCTYPE html>
   <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                padding: 0px;
                margin: 0;
            }
            div{
                width:100px;
                height:100px;
            }
            .box1{
                background: #000000;
            }
            .box2{
                background: #0000FF;
                position: relative;
                left:100px;
                top: 100px;
            }
            .box3{
                
                
                background:#640045;
            }
            
            
            
            
        </style>
        
    </head>
    <body>
        
        <!--
        定位
              绝对定位absolute：父级没有定位时，相对文档定位，脱离文档流，提升层级
              相对定位relative：相对自己定位（参照物是自己），不脱离文档流，提升层次
              固定定位fixed：
              没有（默认）定位static：
             
         
         只要有定位，就可以使用扩展样式
         left right top bottom 
         -->
        
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        
        
    </body>
    </html>

固定定位（fixed）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                 padding: 0;    
            }
            body{
                height: 2000px; 
            }
            #aaa{
                padding: 50px;
            }
            a{
                text-decoration: none;
            }
            ul{
                list-style: none;
            }
            #nav{
                height: 49px;   
                background: black;
               /* 窗口缩小隐藏超出部分 */
                overflow: hidden;
                white-space: nowrap;    
                /* 固定定位针对窗口定位，提高文档流，提升层级 */
                width: 100%;
                position: fixed;        
            }
            #nav .logo a {
                font-size: 20px;
                font-weight: 900;
                color:#68cdba ;
                padding:4px 0;
            }
            #nav .logo{
                margin-left: 215px;     
            }
            #nav li {
                line-height: 49px;
                float: left;
                margin-left:24px ;  
            }
            #nav li a{
                font-size: 14px;
                color:#ffffff ;
                padding: 12px 0;
                transition:0.3s;
            }
            #nav li a:hover{
               color:#68cdba ;  
            }
            #nav li .zhuce,#nav li .denlu{
                border:#68cdba 1px solid;
                padding: 2px 5px;
                border-radius: 10px;
            }   
        </style>
    </head>
    <body>
        <div id="nav">
            <ul>
                <li class="logo"><a href="">Boss直聘</a></li>
                <li><a href="">首页</a></li>
                <li><a href="">职位</a></li>
                <li><a href="">公司</a></li>
                <li><a href="">App</a></li>
                <li><a href="">咨询</a></li>
                <li><a href="">职位</a></li>
                <li style="margin-left:200px ;"><a href="">上传简历</a></li>
                <li><a href="">我要找工作</a></li>
                <li><a href="">我要招聘</a></li>
                <li><a class="zhuce" href="">注册</a></li>
                <li><a class="denlu"href="">登录</a></li>
            </ul>   
        </div>
        <div id="aaa">
            阿斯达达大厦大厦大厦
        </div>
    </body>
</html>