html - CSS背景叠加影响标题文本

.bg-overlay{
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color: rgba(0,0,0,0.4);
        z-index:0;
    }
    #popular-packages{
        position: relative;
        min-height:900px;
        background: url('../../photos/bg/pack-bg.jpg');
        color:white;
    }
    #popular-packages .heading{
        padding-top:15vh;
    }
    #popular-packages .heading h2{
        font-family: sans-serif;
        font-weight: 800;
        font-size:40px;
        z-index:2;
    }
    #popular-packages .heading h4{
        font-size:20px;
        line-height: 36px;
    }
    .single-package-item .image-section{
        position: relative;
    }
    .single-package-item .image-section img{
        width:100%;
    }
    .single-package-item .package-cost{
        position: absolute;
        left:0;
        bottom:0;
        background-color: #F9676B;
        padding:5px 20px 5px 20px;
        font-weight: 800;
    }
    .single-package-item h5{
        font-family:sans-serif;
        font-weight: 700;
        margin-top:25px;
    }
    .single-package-item p{
        font-size:15px;
    }
    .single-package-item .read-more{
        color:#f9676b;
        text-transform: uppercase;
    }
    .single-package-item .read-more .fa-arrow-right{
        font-size:12px;
        transition: 0.5s;
        position: relative;
        top:-2px;
    }
    .single-package-item .read-more:hover .fa-arrow-right{
        margin-left:10px;
    }
    .more-package{
        background-color: #f9676b;
        width:200px;
        padding:10px 0px 10px 0px;
        margin:auto;
        cursor: pointer;
        transition:0.5s;
    }

     <section id="popular-packages">
                <div class="bg-overlay"></div>
                <div class="container">
                    <div class="heading text-center mb-5">
                        <h2>POPULAR PACKAGES</h2>
                        <h4>TRAVEL EXPRESS PROVIDE</h4>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="single-package-item">
                                <div class="image-section">
                                    <img src="photos/package/pack-1.jpg" alt="">
                                    <div class="package-cost">$3000</div>
                                </div>
                                <h5>AMERICA- 5 Days, 4 Nights</h5>
                                <p>
                                    There are many variations of passages of Lorem Ipsum available,
                                    but the majority have suffered alteration in some form, by
                                </p>
                                <div class="read-more">
                                    Read More  <i class="fas fa-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="single-package-item">
                                <div class="image-section">
                                    <img src="photos/package/pack-2.jpg" alt="">
                                    <div class="package-cost">$4000</div>
                                </div>
                                <h5>Thailand- 4 Days, 3 Nights</h5>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet modi
                                    inventore voluptatum molestiae assumenda
                                </p>
                                <div class="read-more">
                                    Read More <i class="fas fa-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="single-package-item">
                                <div class="image-section">
                                    <img src="photos/package/pack-3.jpg" alt="">
                                    <div class="package-cost">$4000</div>
                                </div>
                                <h5>Thailand- 4 Days, 3 Nights</h5>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet modi
                                    inventore voluptatum molestiae assumenda
                                </p>
                                <div class="read-more">
                                    Read More <i class="fas fa-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="more-package btn-hover-white text-center my-5">
                        MORE PACKAGE
                    </div>
                </div>
        </section>

我在此部分添加了黑色覆盖，不知道为什么，但这会影响所有离开行元素的标题文本。我可以通过将所有内容都设为bg-overlay的children div来解决此问题。但是这样做时，最小高度无效。我想保留最小高度，并使标题文本具有正常的颜色。

最佳答案

请添加此CSS。

.container {
    position: relative;
    z-index: 100;
}