Tabula_Rasa
Mitglied
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?
Wie müsste ich die css-Klasse comment-header definieren, damit das Vorhaben gelingt?
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?
HTML:
<img [src]="imgConstructor(post.img)" class="post-image" alt="post">
<div class="comment-header">....</div>
CSS:
.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?