CSS让子容器超出父元素（子容器悬浮在父容器效果）

今天药忘吃喽~ 2023-02-23 08:55 24阅读 0赞

## 前言 ##

有时候，我们需要如下图这样一个悬浮效果需求：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20200706225319670.png]

## 实现 ##

在标准的正常的情况下，只能使用 `绝对定位` 来完成。  
![在这里插入图片描述][20200706224008887.png]

1.  第一步：父容器定位设置为 **relative（相对定位）**。
2.  第二步：子容器定位设置为 **absolute（绝对定位）**。

<div id="a">
       <div id="b">我要浮出去！</div>
    </div>

#a{ 
      width:400px;
      height:100px;
      background:rgb(0, 0, 0);
      position:relative;/*父元素>相对定位*/
    }
    
    #b{ 
      width: 150px;
      height:50px;
      background:rgb(185, 155, 255);
      position:absolute;/*子元素>绝对定位*/
      top:-30px;/*控制浮出*/
      /* left:XX; */
    }

效果图：  
![在这里插入图片描述][20200706225352415.png]  
**父元素设置 `绝对定位` ，子元素设置 `相对定位` ，即子元素依照父元素进行定位。**

> 注意：只有子元素会脱离文档流，父元素是相对定位并不会脱离文档流，所以不会造成页面错位。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200706223626172.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ==,size_16,color_FFFFFF,t_70
[20200706225319670.png]: https://img-blog.csdnimg.cn/20200706225319670.png
[20200706224008887.png]: https://img-blog.csdnimg.cn/20200706224008887.png
[20200706225352415.png]: https://img-blog.csdnimg.cn/20200706225352415.png