Липкий нижний элемент от розетки маршрутизатора

Question

Состав:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

У одного компонента есть кнопка, которую я хочу сделать прикрепленной ко дну. как:

position: -webkit-sticky;
position: sticky;
bottom: 1rem;
align-self: flex-end;

Но вы видите, что есть app-footer - моя кнопка не будет прилипать к низу при прокрутке вниз в разделе нижнего колонтитула. Как сделать так, чтобы липкое дно было также над нижним колонтитулом?

Answer 1

Используйте фиксированное положение для вашей кнопки

.button-class {
 position: fixed;
 bottom: 1rem;
}