Wie stacke ich zwei HTML-Elemente mit dem Attribut position: sticky?

[Tabula_Rasa]

Hallo zusammen,

ich habe zwei HTML-Elemente img und ein div die beide das position:sticky;-Attribut verliehen bekommen sollen, jedoch soll das Bild den div-tag blocken, wenn dieser versucht über das Bild zu wandern - sie sollen sich wie zwei Elemente mit display:block;-Attribut zueinander verhalten. Bekomme ich das irgendwie hin, ohne die beiden Elemente in einen gemeinsamen div-tag zu tun?

<img [src]="imgConstructor(post.img)" class="post-image" alt="post">
<div class="comment-header">....</div>

.post-image {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0px;
    z-index: 20;
    background-color: white;
    padding-bottom: 7px;
}

.comment-header{
    padding: 7px;
    background-color:lightsteelblue;
    color: white;
    font-size:  1.2rem;
}

Wie müsste ich die css-Klasse comment-header definieren, damit das Vorhaben gelingt?

 

[Tabula_Rasa]

Der comment-header befindet sich in einem Container mit der Klasse comments. Dann müsste ich den comment-header außerhalb des Comments-Containers lagern, obwohl dieser ja eigentlich vom Inhalt er in den Comments-Container gehört. Dann, denke ich, lagere ich einfach den comment-header aus, sollte ja eigentlich keine Probleme bereiten, da der Header nicht wirklich viel Inhalt hat. Danke für den Ratschlag !