css中的绝对定位

我不是女神ヾ 2023-01-10 14:33 185阅读 0赞

**今天来讲css中绝对定位：**  
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的  
\{position:absolute;\}

***1. 情况一：没有父盒子，即父盒子就是浏览器***  
html代码如下：

css(absolute.css)代码如下：

/* 清除浏览器的内外边距 */
    * {
        
        margin: 0;
        padding: 0;
    }
    /*  */
    .alone {
        
        width: 300px;
        height: 300px;
        background-color: blueviolet;
        /* 绝对定位：距离顶部0px，距离右边0px */
        position: absolute;
        top: 0px;
        right: 0px;
        }

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]  
***2. 情况二:有父盒子但是父盒子没有定位***  
html代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="absolute.css">
    </head>
    <body>
        
        <div class="father">
            <div class="son">
    
            </div>
        </div>
    </body>
    </html>

css（absolute.css）代码如下：

/* 清除浏览器的内外边距 */
    * {
        
        margin: 0;
        padding: 0;
    }
    /* 情况二：有父盒子但是父盒子没有定位 */
    .father {
        
        width: 300px;
        height: 300px;
        background-color: darkturquoise;
    }
    .son {
        
        width: 20px;
        height: 20px;
        background-color: blueviolet;
        /* 绝对定位，距离上30px，距离右50px */
        position: absolute;
        top: 30px;
        right: 50px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]  
***3.情况三：有父盒子并且父盒子有定位（无论是相对定位还是绝对定位还是固定定位）***  
html代码如下：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="absolute.css">
    </head>
    
    <body>
        
        <div class="father">
            <div class="son"></div>
        </div>
    </body>
    
    </html>

css（absolute.css）代码如下：

/* 清除浏览器的内外边距 */
    * {
        
        margin: 0;
        padding: 0;
    }
    
    /*  */
    .father {
        
        width: 300px;
        height: 300px;
        margin: 100px;
        /* 父级盒子有了绝对定位咯 */
        position: absolute;
        background-color: brown;
    }
    .son {
        
        width: 30px;
        height: 30px;
        /* 绝对定位：距离左边50px，距离下边50px */
        position: absolute;
        left: 50px;
        bottom: 50px;
        background-color: chartreuse;
    }

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]  
***4.情况四：有父盒子但是父盒子没有定位而爷爷盒子有定位，则在爷爷盒子的范围内定位***  
html代码如下：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="absolute.css">
    </head>
    
    <body>
         
         <div class="grandfather">
            <div class="father">
                <div class="son"></div>
            </div>
        </div>
    </body>
    
    </html>

css（absolute.css）代码如下：

/* 清除浏览器的内外边距 */
    * {
        
        margin: 0;
        padding: 0;
    }
    .grandfather {
        
        width: 800px;
        height: 800px;
        /* 爷爷有定位 */
        position: absolute;
        background-color: darkturquoise;
    }
    /* 爸爸无定位 */
    .father {
        
        width: 400px;
        height: 400px;
        background-color: deeppink;
    }
    /* 那此时孙子就向爷爷看齐 */
    .son {
        
        width: 200px;
        height: 200px;
        background-color: dimgrey;
        position: absolute;
        top: 500px;
        left: 500px;
    }

运行结果如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]

**这只是例子，从中我们可以总结，父级有定位，则看父级，父级没有定位，则继续向上找父级，实在找不到的话，就浏览器对齐啦，浏览器是默默爱你的哈哈**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221119/48e6b6b37cb94d4a93f65eed8e50dece.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221119/38ac75720cf3470e8d7d2ba03a4bffb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: /images/20221119/ffad7660107344e3822a93c7958ed897.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]: /images/20221119/8b661857305749138aba1fd13b05ef4d.png