CSS让子容器超出父元素(子容器悬浮在父容器效果)

CSS让子容器超出父元素（子容器悬浮在父容器效果）是一种常见的前端开发技巧，可以实现更丰富的界面效果。下面是实现该效果的完整攻略以及两条示例说明：

CSS让子容器超出父元素（子容器悬浮在父容器效果）是一种常见的前端开发技巧，可以实现更丰富的界面效果。下面是实现该效果的完整攻略以及两条示例说明：

方法一：使用绝对定位

通过将父容器设置为相对定位，再将子容器设置为绝对定位，可以让子容器脱离文档流，并能够超出父容器。下面是具体的实现步骤：

1. 在HTML代码中添加一个父容器，子容器以及需要超出父容器的内容；
2. 在CSS代码中设置父容器的position属性为relative；
3. 设置子容器的position属性为absolute，并设置top、left、right或bottom等属性值，以便调整子容器的位置；
4. 调整需要超出父容器的内容的位置和大小，使其与子容器重合。（因为子容器可以脱离文档流，所以超出父容器的内容无法撑开父容器，需要手动调整位置。）

示例1：

HTML代码：

<div class="parent-container">
  <div class="child-container">
    <p>这里是需要超出父容器的内容。</p>
  </div>
</div>

CSS代码：

.parent-container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
.child-container {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 240px;
  height: 240px;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
}

在上述示例中，父容器的宽度和高度都为200px，在其内部设置了一个子容器，并将其位置调整到父容器的左上方。接着，通过设置子容器的宽度、高度、内边距和盒模型（box-sizing），使其扩大到超出父容器的范围内。

示例2：

HTML代码：

<div class="parent-container">
  <img src="example.jpg" alt="示例图片">
  <div class="child-container">
    <p>这里是需要超出父容器的内容。</p>
  </div>
</div>

CSS代码：

.parent-container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
.parent-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.child-container {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 60px;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
}

在上述示例中，父容器内部设置了一个图片元素和一个子容器，图片元素使用了object-fit属性，以便它占据整个父容器，并保持比例不失真。接着，通过设置子容器的底部位置、左侧位置、变形和盒模型，使其进一步超出了父容器，形成了悬浮的效果。