Относительное положение css не работает. Пожалуйста, проверьте приведенный ниже код и восстановите - PullRequest
0 голосов
/ 22 апреля 2020
<div class="overlay">
  <mat-progress-spinner class="spinner" [color]="color" [mode]="mode" [value]="value">
  </mat-progress-spinner>
</div>

.overlay {
  position:fixed;
  display:block;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-color:rgba(74,74,74,.8);
  z-index:99999;
}
.spinner {
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

In the overlay class if i am changing the position from fixed to relative the overlay div is shrinking to a thin line. But as far i know the spinner should stick to the middle of the div. Can someone explain me why i am facing such an issue. And giving fixed it works fine. Position with css not working as expected need help for the same

  1. Это обычный текст
  2. Это элемент списка

    Skip a line and indent eight spaces.
    Eight spaces will trigger the code block.
    

    Нужна помощь в том же Положение для css вызывает проблему. Кто-нибудь может заставить меня понять, что здесь происходит, почему код не работает, когда я изменяю значение позиции на относительное

...