Element positioned with position Absolute is expanding upwards

Question

I have a nav and within it I have a notifications icon.

I made a *ngIf to show a card when the user clicks on the icon, I positioned this card with position Absolute, but within the card I have several contents that should appear on demand as the customer clicks on the topic, but when I use position Absolute, my card is expanded upwards whenever a new element appears, I would like it to maintain its position.

Follow gif showing the problem:

When I have many open elements I believe the close button and the card will be hidden. How can I resolve this?

Follows my html:

<nav class="navbar navbar-light fixed-top blue lighten-4">

    <div (click)="abreMenu()" id="nav-icon4">
        <i class="fa fa-bars"></i>
    </div>

    <div id="colunaTituloPagina">
        <h2 class="tipografiaDash">{{nomePagina}}</h2>
    </div>

    <div id="divSino">
        <i id="iconeSino" matBadge="22" matBadgeColor="warn" class="fa fa-bell animated swing infinite"></i>
    </div>

    <div id="cardNotificacao" class="card">
        <div class="conteudoNotificacao">
            <div id="headerNotificacao">
                <h6 class="descricaoNotificacoes">Notificações</h6>
                <i id="iconeFechaNotificacao" class="fa fa-close"></i>
            </div>

            <div class="card">
                <h6 (click)="mostraPedidos = !mostraPedidos">Pedidos</h6>

                <h6 class="animated fadeIn" *ngIf="mostraPedidos">Lorem ipsum blalalblab</h6>
            </div>
        </div>
    </div>

</nav>

My css:

 #iconeFechaNotificacao{
    float: right;
    position: absolute;
    font-size: 25px;
    color: #da1717;
    top: 0;
    right: 0;
    margin: 10px;
 }

 #headerNotificacao{
     display: inline-flex;
 }

 #cardNotificacao{
    min-width: 320px;
    padding: 30px;
    position: absolute;
    right: 0px;
    margin: 5px;
    margin-top: 30px;
 }

I use the Material Design Bootstrap

Answer 1

It lacked the property top, that you can use the value you find best at the distance from the top of the page (ex. top: 10px;):

I put a button to remove the top to see the effect.

function topo(){
   $("#cardNotificacao").css("top", "auto");
}

#iconeFechaNotificacao{
    float: right;
    position: absolute;
    font-size: 25px;
    color: #da1717;
    top: 0;
    right: 0;
    margin: 10px;
 }

 #headerNotificacao{
     display: inline-flex;
 }

 #cardNotificacao{
    min-width: 320px;
    padding: 30px;
    position: absolute;
    right: 0px;
    margin: 5px;
    margin-top: 30px;
    top: 0; /* distância do topo */
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<nav class="navbar navbar-light fixed-top blue lighten-4">

    <div (click)="abreMenu()" id="nav-icon4">
        <i class="fa fa-bars"></i>
    </div>

    <div id="colunaTituloPagina">
        <h2 class="tipografiaDash">{{nomePagina}}</h2>
        <button style="left: -100px; position: relative;" onclick="topo()">Retirar o top</button>
    </div>

    <div id="divSino">
        <i id="iconeSino" matBadge="22" matBadgeColor="warn" class="fa fa-bell animated swing infinite"></i>
    </div>

    <div id="cardNotificacao" class="card">
        <div class="conteudoNotificacao">
            <div id="headerNotificacao">
                <h6 class="descricaoNotificacoes">Notificações</h6>
                <i id="iconeFechaNotificacao" class="fa fa-close"></i>
            </div>

            <div class="card">
                <h6 (click)="mostraPedidos = !mostraPedidos">Pedidos</h6>

                <h6 class="animated fadeIn" *ngIf="mostraPedidos">Lorem ipsum blalalblab<br><br><br><br><br></h6>
            </div>
        </div>
    </div>

</nav>