Как отображать элемент относительно другого

#img_background {
    z-index: -1;
    position: relative;
    width: 100vw;
    height: 100%;
    margin-top: -10vh;
    background-image: url('images/background.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}

#homelander {
    width: 55%;
    position: absolute;
    bottom: 0px;
    right: 1%;
}

#gradient {
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    height: 100vh;
}

#logo_in_block {
    width: 50%;
    left: 10%;
    top: 15%;
    position: relative;
}

#synopsis {
    position: absolute;
    width: 45%;
    left: 13%;
    top: 65%
    font-size: 20pt;
    line-height: 20pt;
    color: white;
    text-shadow: 0 0 3px rgb(255, 169, 169);
    padding: 1%;
}

<main>
            <section id="gradient">
                <article id="img_background">
                    <img src="images/homelander.png" alt="homelander" id="homelander" />
                    <img src="images/logo.png" alt="logo" id="logo_in_block" />
                    <p id="synopsis">
                        Действие сериала разворачивается в мире, где существуют супергерои.
                        Именно они являются настоящими звездами. Их все знают и обожают. Но
                        за идеальным фасадом скрывается гораздо более мрачный мир наркотиков
                        и секса, а большинство героев — в жизни не самые приятные люди.
                        Противостоит им отряд, неофициально известный как «Пацаны».
                    </p>
                </article>
            </section>
        </main>