CSS实现响应式叠层图片布局：优化移动端显示

<div class="main-container">
    <div class="text-container">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
            <br>Quos natus, corrupti vitae assumenda veritatis consectetur
            <br>debitis corporis ex odit iste voluptates rerum omnis animi ullam itaque.
            <br>Quis quam facilis facere?</p>
        <br>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            <br>Sunt unde reiciendis quod deserunt officia quos consequatur laborum ea amet quo.</p>
    </div>
    <div class="image-container">
        <img class="image1" src="https://placekitten.com/200/300" alt="示例图片1">
        <img class="image2" src="https://placekitten.com/200/300" alt="示例图片2">
    </div>
</div>

.main-container {
    display: flex; /* 启用Flexbox布局 */
    flex-wrap: wrap; /* 允许子项在空间不足时换行，增强响应性 */
    height: 370px; /* 设置主容器高度，可根据内容调整 */
    width: 100%; /* 宽度占满父容器 */
    position: relative; /* 为可能的子元素相对定位提供上下文 */
    background-color: #fbf9f6; /* 背景色 */
    padding: 10px; /* 内部填充 */
    box-sizing: border-box; /* 边框盒模型，使padding和border不增加元素总宽度 */
    justify-content: center; /* 主轴居中对齐，当flex-wrap生效时，内容块会居中 */
    align-items: flex-start; /* 交叉轴顶部对齐 */
}

.text-container {
    flex: 1; /* 允许文本容器弹性增长，占据可用空间 */
    min-width: 280px; /* 最小宽度，防止在小屏幕上文本过窄 */
    margin: 10px; /* 外边距 */
    padding-right: 20px; /* 与图片容器保持距离 */
}

.image-container {
    display: flex; /* 内部图片也使用Flexbox布局 */
    justify-content: space-between; /* 图片之间均匀分布空间 */
    align-items: center; /* 交叉轴居中对齐 */
    width: 350px; /* 图片容器的固定宽度，可根据设计调整 */
    min-width: 250px; /* 最小宽度，确保图片不会过小 */
    flex-shrink: 0; /* 防止图片容器在空间不足时收缩，保持其宽度 */
    margin: 10px; /* 外边距 */
    position: relative; /* 为内部图片叠层提供定位上下文 */
}

.image1,
.image2 {
    max-width: 100%; /* 图片最大宽度不超过父容器 */
    height: auto; /* 高度自动调整，保持图片比例 */
    border: 1px solid #ccc; /* 边框 */
    display: block; /* 移除图片底部默认空白 */
}

.image2 {
    /* 通过负外边距实现叠层效果 */
    /* 向上移动100px，向左移动150px，与image1形成重叠 */
    margin: 100px 0 0 -150px; 
    z-index: 1; /* 确保image2在image1之上 */
}

/* 媒体查询：针对小屏幕设备进行调整 */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column; /* 在小屏幕上，文本和图片垂直堆叠 */
        height: auto; /* 高度自适应内容 */
        align-items: center; /* 交叉轴居中对齐 */
    }

    .text-container,
    .image-container {
        width: 90%; /* 在小屏幕上宽度调整为90% */
        margin: 10px auto; /* 自动外边距实现水平居中 */
        padding: 0;
    }

    .image-container {
        justify-content: center; /* 图片在小屏幕上居中 */
        flex-wrap: wrap; /* 允许图片换行，防止在极小屏幕上挤压 */
    }

    .image2 {
        /* 在小屏幕上调整叠层效果，使其更适应 */
        margin: 20px 0 0 -80px; /* 调整负外边距 */
    }
}