图像溢出容器，因为h2在其上方

基础概念

图像溢出容器通常是指在一个网页布局中，图像的大小超出了其父容器的边界，导致部分或全部图像内容出现在容器外部。这种情况在CSS布局中比较常见，尤其是在没有正确设置图像尺寸或容器尺寸的情况下。

类型

绝对定位：通过设置图像的position: absolute;，可以使其脱离文档流，从而可能溢出容器。
浮动：使用float属性可以使图像浮动到容器的边缘，如果没有适当的清除浮动，可能会导致溢出。
缩放：如果图像的尺寸大于容器，且没有设置max-width或height: auto;，图像可能会溢出容器。

应用场景

网站设计：在创建网站布局时，经常需要处理图像和容器的关系，以确保视觉效果。
响应式网页：在不同设备上展示网页内容时，需要确保图像不会因为尺寸问题而破坏布局。

问题原因及解决方法

在你的问题中，提到h2标签在其上方导致图像溢出容器，这可能是因为h2标签和图像的布局方式导致的。以下是一些可能的原因和解决方法：

原因

没有设置容器的宽度和高度：如果容器没有明确的宽度和高度，图像可能会超出其边界。
绝对定位：如果h2标签或图像使用了绝对定位，可能会导致布局混乱。
浮动元素：如果h2标签或图像使用了浮动，可能会导致父容器无法正确包裹它们。

解决方法

设置容器的宽度和高度：
设置容器的宽度和高度：
使用Flexbox布局：
使用Flexbox布局：
清除浮动：
清除浮动：
调整h2标签和图像的定位：
调整h2标签和图像的定位：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Overflow Example</title>
    <style>
        .container {
            width: 100%;
            height: 300px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        h2 {
            position: relative;
            z-index: 1;
        }
        img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Heading</h2>
        <img src="path/to/image.jpg" alt="Example Image">
    </div>
</body>
</html>