Как предотвратить наложение содержимого компонента?

Question

Я создал компонент angular с именем панель инструментов и применил к нему следующее CSS.

position: fixed;
z-index: 999;
height: 100px;

Я использовал положение, чтобы фиксировать панель инструментов на странице всякий раз, когда я прокрутите страницу. Я использовал z-index для отображения панели инструментов над всеми другими элементами на странице.

Это компенсирует отдельный элемент, который я использовал в app.component. html.

Моя проблема в том, что при создании страницы с использованием нового компонента, если я перехожу на указанную страницу, 'newcomponent работает!' не отображается, потому что панель инструментов перекрывает его.

Я хочу * * * * * * * * * * * * sh, чтобы сделать мою панель инструментов зафиксированной таким образом, чтобы, если бы у меня был какой-либо новый элемент, какой бы элемент я ни отображал, он появлялся прямо под панелью инструментов, а не под ней.

Спасибо за ваше помощь!

Answer 1

Что может вам помочь, это position: sticky;, это именно то, что вы просите.

Вот пример (вам нужно указать позицию, например, top: 0 для position: sticky, чтобы занять эффект):

body, html {
  margin: 0;
  padding: 0;
}

.toolbar {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 999;
  height: 100px;
  width: 100%;
  background: red;
  opacity: 0.5;
}

.contents {
  height: 5000px;
}

<div class="toolbar">xyz</div>
<div class="contents">
  <div>contents</div>
</div>