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>