почему исправлено не работает, когда у корневого узла есть что-то стили?

Question

демо-адрес

.father {
  width: 250px;
  height: 250px;
  background-color: red;
  overflow: hidden;
  border-radius: 6px;
  z-index: 999;
  position: absolute;
  left: 50px;
  top: 50px;
}

.child {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: blue;
}

<div class="father">
  <div class="child">

  </div>
</div>

Положение "дочернего" узла фиксировано, но оно вырезано узлом "отца", если я настраиваю стиль узла 'папа', он может отображаться нормально. Например, я удаляю 'z-index: 999;' или 'border-radius: 6px;' или «переполнение: скрыто»; или 'position: absolute;', все, что я удалю выше, «дочерний» узел может отображаться нормально, кто может это объяснить? Некоторые предложения были бы хорошими.

Answer 1

Попробуйте это, если хотите, чтобы папка div была на child div , поэтому нет необходимости давать z-index: 999; отцу div Вы должны дать z-index: -1; ребенку div.

.father {
  width: 250px;
  height: 250px;
  background-color: red;
  overflow: hidden;
  border-radius: 6px;
  position: absolute;
  left:50px;
  top:50px;
}

.child{
  position: fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-color: blue;
  z-index: -1;
}

<div class="father">
    <div class="child">
    </div>
</div>