Angular Animations: div enter behind another div - html

Question

I'm trying to do a simple thing in my Angular 7 application.
Basically, I have a title and when I click on it, a comment will ease-in from above to place itself just below the title. The problem is, when the comment is moving, it shows on top of the title which is not quite the effect wanted.
I tried adding a z-index property on the CSS to elevate the title but to no avail.
app.component.ts
import { Component } from '#angular/core';
import { trigger, transition, style, animate } from '#angular/animations';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
animations: [
trigger('slideInOut', [
transition(':enter', [
style({transform: 'translateY(-100%)'}),
animate('200ms ease-in', style({transform: 'translateY(0%)'}))
]),
transition(':leave', [
animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
])
])
]
})
export class AppComponent {
visible = false;
showMessage() {
this.visible = !this.visible;
}
}
app.component.html
<div (click)="showMessage()">
<div class="title">Click here to reveal the comment</div>
<div class="title">25/04/2019 17:30:00</div>
<div class="comment" *ngIf="visible" [#slideInOut]>Lorem ipsum...</div>
</div>
app.component.css
.title {
background-color: aqua;
z-index: 1000;
cursor: pointer;
}
.comment {
background-color: red;
z-index: 0;
}
I created a StackBlitz to show the problem.
Thanks for your help!

Answer 1

In order to z-index work. You need to add position: relative or absolute to the element. In your case, add also position: relative to the .title.

Answer 2

You can add the following:
.title, .comment{
position:relative;
}
z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).
See Fork