положение div фиксировано, но также необходимо относительное для дочернего элемента

Question

Я попытался установить фиксированное положение div для просмотра его снизу.Но также необходимо позиционировать относительное положение для дочернего элемента div в 10px от родительского элемента div.Вот мой HTML

<div class='container'>
  <div class='inner'></div>
</div>

Вот мой CSS

.container{
   position: fixed;
   position: relative; //this one will apply by priority
   bottom: 0;
   height: 400px;
   width: 400px;
}
.inner{
  position: absolute;
  top: 10px;
}

Этот код не будет работать так, как я ожидал.Как я могу это сделать.

Answer 1

Любая позиция accept static работает как контейнер для дочерних элементов с абсолютным позиционированием.Проблема в вашем случае - bottom: 0.Пока область просмотра меньше, чем .container, верхняя часть контейнера находится вне экрана.Это заставляет ребенка показываться на расстоянии менее 50px сверху.

Использование position: relative просто игнорируется bottom: 0, поскольку смещение 0 ничего не делает.

После удаления bottom: 0:

.container {
  position: fixed;
  height: 400px;
  width: 400px;
  background: silver;
}

.inner {
  position: absolute;
  top: 50px;
}

<div class="container">
  <div class="inner">inner</div>
</div>