我对此媒体查询有疑问。当我缩小浏览器窗口时，我的 <h2> 正在我的容器后面消失

Question

<section class="blog">
        <h2>Blog</h2>
            <div class="wrapper">
                <div class="container">
                    <div class="sub-container">
                        <div class="top-sub-container">
                            <div class="box-box-1">
                                <img src="./assets/image-2.jpg" />
                                <div class="box-text">
                                    <p>Date</p>
                                    <h3>Blog</h3>
                                        <p>Lorem ipsum dolor.</p>
                                            <button class="button">Read More</button>
                            </div>
                        </div>
                        <div class="box-box-2">
                            <img src="./assets/image-3.jpg" />
                                <div class="box-text">
                                    <p>Date</p>
                                    <h3>Blog</h3>
                                        <p>Lorem ipsum dolor.</p>
                                            <button class="button">Read More</button>
                            </div>
                        </div>
                    </div>
                    <div class="box-box-3">
                        <img src="./assets/image-5.jpg" />
                            <div class="box-text">
                                <p>Date</p>
                                <h3>Blog</h3>
                                    <p>Lorem ipsum</p>
                                        <button class="button">Read More</button>
                            </div>
                    </div>
            </div>
                <div class="box-box-4">
                    <img src="./assets/image-4.jpg" />
                    <div class="box-text4">
                        <h3>About me</h3>
                            <p>Lorem ipsum</p>
                    </div>
                </div>
    </div>
</section>

这是我的 CSS

.wrapper {
        width: 90%;
        display: flex;
        flex-direction: column;
    }


    .blog {       
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 100px;
    }


    h2 {
        text-align: center;
        line-height: 5rem;
        z-index:1;
    }

    header {
        margin-bottom: 50px;
    }
    
    .blog {
        margin-top: 250px;
    }


    .container {
        width: 100%;
        height: auto;
        margin-top: 165rem;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
    }

    .sub-container {
        margin: 0;
        height: auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        padding: 0;

    }

    .top-sub-container {
        margin: 0;
        padding: 0;
    }

    .box-box-1 > img {
        margin: 0;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        
    }

    .box-text > p {
        width: 100%;
        font-size: 1.1rem;
    }

    .box-box-2 > img {
        margin-top: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }

    .box-box-3 > img {
        margin-top: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }

    .box-box-4 {
        display: flex;
        width: 100%;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }

    .box-box-4 > img {
        margin: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    
    }

我尝试添加边距和填充，但它一直在容器后面消失。如何将它向上移动，使其位于容器上方而不是隐藏在容器后面？？？

我试过添加margin-top，但还是不行！

编辑：我添加了更多 CSS，但 StackOverflow 说我需要提供更多详细信息。以下是填充文本，因此我可以发布此帖子：Lorem ipsum dolor sit amet、consectetur adipiscing elit、sed do eiusmod tempor incidudunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum。

Answer 1

为你的 CSS 添加 z-index。

.container {
    width: 100%;
    height: auto;
    margin-top: 1.65rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}

h2{
    z-index:1;
}

Answer 2

它可以帮助你

h2{
    margin: 40px 0px;
    text-align:center;
}


.container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}
.sub-container{
    display:flex;
    justify-content: space-between;
    
}

<h2>Blog</h2>
<div class="wrapper">
    <div class="container">
        <div class="sub-container">
            <div class="box-box">
                <img src="https://via.placeholder.com/100" />
                <div class="box-text">
                    <p>Date</p>
                    <h3>Blog Post</h3>
                    <p>Lorem ipsum</p>
                    <button class="button">Read More</button>
                </div>
            </div>
            <div class="box-box">
                <img src="https://via.placeholder.com/100" />
                <div class="box-text">
                    <p>Date</p>
                    <h3>Blog Post</h3>
                    <p>Lorem ipsum.</p>
                    <button class="button">Read More</button>
                </div>
            </div>
            <div class="box-box">
                <img src="https://via.placeholder.com/100" />
                <div class="box-text">
                    <p>Date</p>
                    <h3>Blog Post</h3>
                    <p>Lorem ipsum dolor sit </p>
                    <button class="button">Read More</button>
                </div>
            </div>
        </div>
    </div>
</div>