设置位置：将孩子固定到相对于其父

Question

如何将position:fixed的元素设置为相对于其父级的高度/宽度？​​

过去有一两个问题，但他们只询问如何将子元素设置为父宽度的100%，这不是我的意思。问。                 

#parent {
  height:50%;
  width:50%;
}

#child {
  height:25%;
  position:fixed;
  width:25%;
}

JSFiddle

正如您在该链接中看到的那样，#child是文档正文的25%的高度和宽度，而不是#parent，您还可以看到position:relative是没有帮助。

我理解在这个示例中，我可以将#child的高度和宽度设置为12.5%以获得相同的效果，但这不是一个修复，如果是#parent的宽度设置为px？

Answer 1

简单的答案：你不能 - ＆＃34;固定＆＃34;表示它仅依赖于视口，而不依赖于任何其他DOM元素

但是：如果您使用position: absolute代替fixed，那么您应该实现目标。另外：父元素必须具有position设置而不是static（这是默认设置）。所以只需使用

#parent {
  position: relative;
  height:50%;
  width:50%;
}

#child {
  height:12.5%;
  position:absolute;;
  width:12.5%;
}

（高度/宽度设置必须与父元素相关）

Answer 2

如果#parent对于能够放置#child的位置很重要，那么让父母拥有position: fixed;属性，孩子仍然会有使用百分比＆＃34;％＆＃34;时相对于其父级的宽度，此外，由于其父容器，它的行为类似于position: fixed;组件。