将 position:fixed child 设置为相对于其父级的高度/宽度答案

【问题标题】：Setting a position:fixed child to a height/width relative to its parent将 position:fixed child 设置为相对于其父级的高度/宽度
【发布时间】：2022-01-25 21:30:48
【问题描述】：

如何将带有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?

【问题讨论】：

标签： html css css-position

【解决方案1】：

简单的答案：你不能——“固定”意味着它只依赖于视口，而不依赖于任何其他 DOM 元素

但是：如果你使用position: absolute 而不是fixed，你应该实现你所追求的。另外：父元素必须有一个position设置而不是static（这是默认设置）。所以只需使用

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

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

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

【讨论】：

【解决方案2】：

如果#parent 对能够放置#child 的位置很重要，那么通过这种方式使父级具有position: fixed; 属性，则在使用百分比时子级相对于其父级仍然具有宽度" %"，此外，由于其父容器，它的行为类似于position: fixed; 组件。

【讨论】：