CSS -隐藏底部和有意在顶部重叠

Question

大家好，我已经学习HTML和CSS两个星期了。现在我在relative和absolute的职位上遇到了麻烦。我的父级是relative，图像是absolute，但是，每次我调整浏览器的大小时，底部都会重叠。如何使底部隐藏和顶部故意重叠其父对象？

我试着做了100vh的高度，但图像有一个很大的差距，所以我只是调整了68vh，我的问题是当我调整浏览器时，它重叠了

Screenshot of the overlap

//Parent
#info-5{
    background: url("../img/score-bg.jpg") no-repeat center center/cover;
    color: var(--white-primary);
    position: relative;
    height: 68vh;

    /*overflow-y: hidden;*/
}

//Grid container
#info-5 .info-5-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 100%;
}


//Child
#info-5 .info-5-container img {
    justify-content: center;
    position: absolute;
    top: -35px;
    bottom: 0;
    right: 250px;
}

<section id="info-5" class="p-3">
    <div class="container">
        <div class="info-5-container">
            <article>
                <h1 class="l-heading">
                    Calculate my Score
                </h1>
                <h2>Check your credit reports as often as you want, it won't affect your scores.
                </h2>
                <a href="#" class="btn btn-orange-primary">Show my score</a>
            </article>
            <img src="img/hand.png" alt="Info 5">
        </div>
    </div>
</section>

Answer 1

使用Viewport Units，如用于width的vw和用于height的vh，而不是px、%、em或rem，因为它将帮助您使网页/网站具有响应性，并且无论屏幕大小如何，它都会自动调整大小。

它肯定会解决你的问题，但如果它不让我在评论中知道，我会尽我最大的努力帮助你。