css中的子绝父相具体例子

矫情吗；* 2023-01-10 14:44 112阅读 0赞

**子绝父相是什么呢？**  
**子级是绝对定位的话，父级要用相对定位。**  
*1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子 。  
2.子盒子的运动范围必须在父盒子里面移动，因此此时父盒子需要加定位（相对或绝对或固定定位）。  
3.因为父盒子需要占有位置，放子盒子能浮在上面，因此父盒子应该是相对定位。*

**现在我先做一个例子。背景：**  
html代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>子绝父相</title>
        <link rel="stylesheet" href="absolute.css">
    </head>
    <body>
        <div class="box">
            <img src="images/img_03.png" alt="">      
        </div>
    </body>
    </html>

css（absolute.css）代码如下：

.box {
        
        width: 300px;
        height: 400px;
        background-color: aquamarine;
        margin: auto;   
    }
    .box img {
        
        width: 100%;
    }

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]  
**现在来添加一张照片，放在右上角就可以了**  
html代码如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]  
css（absolute.css）的代码如下：

.box {
        
        width: 300px;
        height: 400px;
        background-color: aquamarine;
        margin: auto;   
        position: relative;
    }
    .box img {
        
        width: 100%;
    }
    .box .label {
        
        /* 子盒子绝对定位。距离上0右0 */
        position: absolute;
        top: 0px;
        right: 0px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]  
运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]  
位置还不是很让我们满意，根据最上角提到的，子级绝对定位，不会占有位置，可以放到父盒子的任何地方。因此，我们按住f12调出检查窗口，进行移动，找到合适的位置，然后将参数改在代码里面，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]  
更改后的css代码如下：

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

你知道子绝父相如何应用了么？嘻嘻加油~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221119/59a52a25a9324dac8f3e314375f368cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221119/b82e09b77aae4feeb8766dab9ad2779d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: /images/20221119/4d6829c6004b4ffd88c2d6a4f6879d87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]: /images/20221119/0aeb2c4f8fcf4c36b81835503536cc36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]: /images/20221119/17533a858e3048d6aca2954a48abb50b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210125084930403.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt,size_16,color_FFFFFF,t_70