css--定位

CSS定位方式：相对   绝对   固定

一、相对定位

 　　　position: relative;      默认值为static
                  left: 10px;    距左
                  top: 20px;     距上    所以效果为：向右下移动
           
            相对定位   相对于自己原来的位置
            特点    1 不脱标    2 原来位置保留，老家留坑  3可以提升层级
            使用    1 相对自己进行位置微调       2 配合绝对定位使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width, initial-scale=1.0">
    <title>Document</title>
    <style>

            /* 
            position: relative;
            left: 10px;    距左
            top: 20px;     距上    所以效果为：向右下移动 
            
            相对定位   相对于自己原来的位置
            1 不脱标   2 原来位置保留，老家留坑  3可以提升层级

            使用    1 相对自己进行位置微调
                    2 配合绝对定位使用
            */
        .box1{
            width: 200px;
            height: 200px;
            background-color:red;
            /* 默认值 */
            position: static;
            position: relative;
            left: 10px;   
            top: 20px;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
        
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
相对定位

二、绝对定位

            position:absolute;
            参考点： 1 假如该绝对定位元素 没有定位（相对or绝对or固定）的祖先元素
                       则以body为参考点
                    2 假如有定位的祖先，则以最近的定位祖先元素为参考点
            特性 ：1 脱标  2 假如不设置宽度，则由内容撑开
            使用：子绝父相 
                  儿子采用绝对定位，父亲采用相对定位，此时，儿子可以在父亲范围内任意定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        /* 绝对定位  position:absolute; 
            参考点： 1 假如该绝对定位元素 没有定位（相对or绝对or固定）的祖先元素
                       则以body为参考点
                    2 假如有定位的祖先，则以最近的定位祖先元素为参考点 

            特性 ：1 脱标  2 假如不设置宽度，则由内容撑开
            使用：子绝父相  
                  儿子采用绝对定位，父亲采用相对定位，此时，儿子可以在父亲范围内任意定位
                     

        */
        .box3-fa{
            width: 300px;
            height: 300px;
            border: 4px dashed  purple;
            position: relative;
            left: 40px;
            top: 30px;
            
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: cyan;
            position: absolute;
            left: 20px;
            top: 30px;
        }
    </style>
</head>
<body>
    <div class="box-gradfa">
        <div class="box3-fa">
            <div class="box3"></div>
        </div>
    </div>
    
</body>
</html>
绝对定位

三、固定定位

        position: fixed;
        参考点：始终以浏览器窗口左上角为参考点
        特点  1 脱标  2 层级高于标准流元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
   /* 
        固定定位   position: fixed;
        参考点：始终以浏览器窗口左上角为参考点 
        特点  1 脱标  2 层级高于标准流元素
   */
        .box3-fa{
            width: 300px;
            height: 300px;
            border: 4px dashed  purple;
            position: relative;
            left: 40px;
            top: 30px;
            
        }

      
       .box3-fa >.box3{
            width: 200px;
            height: 200px;
            background-color: cyan;
            position: fixed;
            left: 20px;
            top: 30px;
        }
    </style>
</head>
<body>
    <div class="box-gradfa">
        <div class="box3-fa">
            <div class="box3"></div>
        </div>
    </div>
    
</body>
</html>

 

posted @ 2020-08-01 16:43  NodeHzi  阅读(127)  评论(0)    收藏  举报