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{
             200px;
            height: 200px;
            background-color:red;
            /* 默认值 */
            position: static;
            position: relative;
            left: 10px;   
            top: 20px;
        }

        .box2{
             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{
             300px;
            height: 300px;
            border: 4px dashed  purple;
            position: relative;
            left: 40px;
            top: 30px;
            
        }

        .box3{
             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{
             300px;
            height: 300px;
            border: 4px dashed  purple;
            position: relative;
            left: 40px;
            top: 30px;
            
        }

      
       .box3-fa >.box3{
             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>