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

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabula_Rasa

Mitglied
12 Mai 2017
239
2
18
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?

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?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.081
404
83
67
Ein gemeinsamer Container wäre genau meine Idee - warum willst Du das denn nicht?
Wenn Du versuchst, dem .comment-header ein passendes top zu geben, bekommst Du sofort ein Problem, wenn die Höhe des .post-image variabel sein kann, wenn das Ganze responsiv werden soll.
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
239
2
18
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 !
 
Werbung: