Use position Absolute to always leave element at the bottom but without overlapping another element

Question

Currently I have a sidenav made with Angular Material.

I have a list with menu and submenus, and at the end I have a logo. My problem is that when all the menus inside my sidenav are opened, they end up colliding with my logo:

(I removed the visibility of menu items and logo)

The collision happens in the menu "Logs" and the logo.

I tried it in the following ways:

HTML:

<img id="logo" src="../../../assets/logo">

#logo{
    width: 120px;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
    margin-bottom: 5%;
}

Currently works well if the menus are closed, my logo is positioned at the bottom of my sidenav, but if the user opens the menus collides with the menu "Logs".

I tried too:

#logo{
    width: 120px;
    bottom: 0;
    left: 0;
    display: flex;
    right: 0;
    /* position: absolute; */
    margin: auto;
    margin-bottom: 5%;
}

That way the menu doesn’t collide with the logo, but my logo isn’t centered at the end of my sidenav.

Is there any way my logo can be centered at the end of my sidenav without it being possible for it to collide with open menus?

HTML Completo:

<mat-sidenav-container hasBackdrop="false" class="container-sidenav">
    <mat-sidenav [(opened)]="opened" #sidenav mode="over">
        <mat-list>
            <div class="container">
                <div class="row">
                    <div class="col-3">
                        <div id="avatarDash" class=" pointerCursor">
                            <svg id="svgDash" class="svgIconeMenu" style="width:40px;height:40px" viewBox="0 0 24 24">
                                <path fill="rgb(161,196,66)" d="1,3H3V13H11V3M21,11H13V21H21V11M11,15H3V21H11V15Z" />
                            </svg>
                        </div>
                    </div>
                    <div class="col-9">
                        <div class="col-12 pointerCursor">
                            <span class="tipografiaDescricaoIcone">Menu 1</span>
                        </div>
                    </div>
                </div>
                <div id="menuCadastros">
                    <div (click)="changeMenuCadastros()" class="row">
                        <div class="col-3 colAtiva">
                            <div class="pointerCursor">
                                <svg class="svgIconeMenu"
                                    xmlns="http://www.w3.org/2000/svg" width="37px" height="37px" viewBox="0 0 24 24">
                                    <path d="M0 0h24v24H0z" fill="none"/>
                                    <path d="M20.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/>
                                </svg>
                            </div>
                        </div>
                        <div class="col-6">
                            <span class="tipografiaDescricaoIcone">Cadastros</span>
                        </div>
                        <div class="col-3 pointerCursor">
                            <i class="fa fa-caret-down lightgray" aria-hidden="true"></i>
                        </div>
                    </div>
                    <div>
                        <div class="alinhaSideNav">
                            <span (click)="verificaPermissao(1,'operadores')" class="tipografianivel2 hover-effect">Operadores</span>
                        </div>
                        <div class="alinhaSideNav">
                            <span (click)="verificaPermissao(11,'transportadora')" class="tipografianivel2 hover-effect">Transportadoras</span>
                        </div>
                    </div>
                </div>

        <img id="logo" src="../../../assets/logo.png">

    </mat-sidenav>  

<mat-sidenav-content>

Answer 1

It is difficult to understand what you mean by "collide" and analyze your code only with HTML (without CSS and with Angular Material tags). In the future, enter your code in the question (Ctrl+M or icon of "code snippet" above the editor). There you can put the HTML rendered by browser and Angular Material style sheets found online.

Imagining that "collide" means that the logo appears above the log menu, this happens because the logo has position:absolute but you can get around it by applying position:relative (or position:absolute) in an element that contains all menu items (in your case there is a div.container which incidentally is not closing with after items) and then applying z-index larger than the logo.

Run the following code to see the example.

/* CSS IMPORTANTE - que pode solucionar seu problema */
nav .container { position:relative; z-index:2; }
.logo { position:absolute; top:150px; left:0; right:0; margin:auto; width:50px; background:red; }

/* CSS apenas para visualização */
body { padding-left:50px; }
nav { background:#0000dd; color:#fff; position:fixed; left:-110px; top:0; height:100%; width:150px; }
nav:hover { left:0; }
nav a { display:block; margin:5px; padding:5px; color:#fff; text-decoration:none; }
nav a p { display:none; }
nav a:hover { background:#0000FF; }
nav a:hover p { display:block; }
nav span { float:right; }

<nav>
  <div class='container'>
    <a href='#'>Home<span></span></a>
    <a href='#'>Pastas<span></span></a>
    <a href='#'>Mensagens<span>✉</span>
      <p>submenu</p>
      <p>submenu</p>
      <p>submenu</p>
    </a>
  </div>
  <div class='logo'>LOGO</div>
</nav>
<main>
<h1>SITE</h1>
Posicione o mouse no menu ao lado, depois vá em mensagens e note que o submenu passa por cima do logotipo. Mesmo que o logotipo use position absolute para se posicionar, pois agora seu z-index é mais baixo que da container do menu.<br><br>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium dapibus rutrum. Morbi tincidunt ultrices justo porttitor commodo. In quis enim at augue cursus posuere. Nam luctus dolor nisi, non varius justo pellentesque ut. Morbi ac ex libero. Sed sapien justo, rutrum in nulla in, luctus viverra justo. Praesent nec purus ut lorem sollicitudin convallis. Vivamus ut faucibus lectus, at pharetra arcu.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus dapibus vulputate massa, sed cursus arcu tincidunt sit amet. Morbi rutrum consectetur velit sed sagittis. Cras iaculis eget neque eget dapibus. Donec vulputate leo mollis nulla vehicula, id bibendum leo hendrerit. Morbi id odio ac orci pharetra cursus nec in dui. Vivamus sed neque orci.

Suspendisse vitae vestibulum nibh. Quisque nec aliquet tellus, at porta justo. Phasellus vestibulum, risus sed facilisis lacinia, nibh eros varius justo, sit amet ultrices lorem est quis lectus. Nam laoreet mollis velit nec aliquet. Phasellus sem dolor, faucibus a leo sodales, cursus viverra quam. Nunc ut mi ut nulla elementum dignissim ac quis neque. Pellentesque ultrices lacus quis arcu rutrum condimentum. Mauris imperdiet scelerisque pellentesque. Nunc gravida nibh sed enim vestibulum, in aliquam nisi scelerisque. Sed at sapien sem. Praesent tincidunt auctor elit ac condimentum. Donec ultrices odio suscipit orci hendrerit efficitur.
</main>