Text-Image-Section 顶部覆盖层定位问题求解

• 核心需求：在Text-Image-Section顶部添加蓝色覆盖层，覆盖层需置于区域顶部，但不得遮挡任何文本；Section内及覆盖层中的文本长度均为动态，需适配所有情况。
• 技术栈：PHP、HTML、CSS（SCSS）、JS（jQuery）、Bootstrap 5
• 已尝试方案：使用position: absolute和transform进行定位，但两种方式都无法确保不遮挡文本，优先希望通过纯CSS方案解决，暂未找到可行思路。

当前HTML代码：

<section class="section-image_text">
    <div class="container">
        <div class="row row-image_text">
            <div class="col-12 col-md-6 column-image">
                <div class="image">
                    <img src="/placeholder.jpg" alt="placeholder">
                </div>
            </div>
            <div class="col-12 col-md-6 column-textfield">
                <div class="textfield">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At debitis maiores modi quae quos. Beatae consectetur, dicta harum minima modi perferendis similique soluta tenetur voluptate voluptatum. Ad aperiam architecto beatae commodi dicta est harum numquam quod recusandae suscipit! Aliquam atque delectus dicta eum fugiat id in natus omnis, provident quia reiciendis reprehenderit tempore ut? Accusantium alias aliquid amet blanditiis commodi consectetur consequatur cumque delectus distinctio, doloremque eaque et, excepturi hic illo incidunt ipsa ipsam libero magni maxime minima minus nemo nesciunt nulla numquam obcaecati officiis perferendis porro quibusdam quos repellendus reprehenderit rerum sit suscipit ullam vel voluptas voluptatem. Dolores.</p>
                </div>
            </div>
            <div class="column-visual">
                <div class="visual background-color-orange">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum eos laborum non saepe velit.</p>
                </div>
            </div>
        </div>
        <div class="row row-image_text">
            <div class="col-12 col-md-6 column-textfield">
                <div class="textfield">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At debitis maiores modi quae quos. Beatae consectetur, dicta harum minima modi perferendis similique soluta tenetur voluptate voluptatum. Ad aperiam architecto beatae commodi dicta est harum numquam quod recusandae suscipit! Aliquam atque delectus dicta eum fugiat id in natus omnis, provident quia reiciendis reprehenderit tempore ut? Accusantium alias aliquid amet blanditiis commodi consectetur consequatur cumque delectus distinctio, doloremque eaque et, excepturi hic illo incidunt ipsa ipsam libero magni maxime minima minus nemo nesciunt nulla numquam obcaecati officiis perferendis porro quibusdam quos repellendus reprehenderit rerum sit suscipit ullam vel voluptas voluptatem. Dolores.</p>
                </div>
            </div>
            <div class="col-12 col-md-6 column-image">
                <div class="image">
                    <img src="/placeholder.jpg" alt="placeholder">
                </div>
            </div>
        </div>
    </div>
</section>

内容的提问来源于stack exchange，提问作者ches75