Как исправить заголовок в Angular приложении

Question

Я использую angular 9, и у меня есть 2 компонента: заголовок и тело.

В AppComponent я застрял, чтобы зафиксировать положение заголовка (красным) в Вверх! Проблема в том, что тело (синим цветом) находится над заголовком ...

app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: block;  /* for demo purpose */
  background: red; /* for demo purpose */
  height: 50px;    /* for demo purpose */
}

.body {
  position: sticky;
  border: 4px solid blue; /* for demo purpose */
  height: 800px;          /* for demo purpose */
}

<app-header></app-header>
<div class="body">
  <router-outlet></router-outlet>
</div>

Answer 1

Вы можете создать контейнер и применить display: flex к заголовку. Позвольте мне показать пример:

Стили:

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

app-header {
    height: 30px;
    background-color: orange;
}

.main {
     flex: 1;
}

И HTML:

<div class="container">
    <app-header>
        Header
    </app-header>
    <div class="main">
        <router-outlet></router-outlet>
    </div>
</div>

Answer 2

то, как вы делаете это неправильно, вы можете использовать это

.html

<div class="app-header">
    <app-header></app-header>
</div>

.css

.app-header{
position:fixed;
top:0;
}

вы не можете дать css вашему компоненту с его именем a, так что вы можете сделать это решение в своем приложении- заголовок, который означает завернуть их все в div и придать ему стиль