是否存在CSS定位属性可让子元素忽略父元素定位固定于视口？

假设我们有一个尺寸为100vh×100vw的父元素，当其子元素设置position: fixed时，该子元素会处于父元素中心，对应代码如下：

.parent {
  height: 100vh;
  width: 100vw;
  border: solid 5px orange
}

.child {
  height: 6vh;
  width: 6vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 0.5em;
  position: fixed;
  color: steelblue;
  cursor: pointer;

  &.childOfChild { /* 三条杠图标 */
    width: 3vh;
    height: .25em;
    border-radius: .1em;
    margin: 3px;
  }
}

当父元素高度改为180vh以容纳其他子元素时，该fixed定位的子元素会随父元素下移，不再处于视口中心：

现需在不将该子元素移出父元素、不使用margin或transform属性的前提下，仅通过CSS定位属性让子元素忽略父元素定位，始终固定在视口中心，是否可行？

可行，具体处理如下：

1. 修复fixed定位基准 #

你的fixed子元素随父元素下移，说明父元素（或其上层祖先）存在transform/perspective/filter这类会改变fixed定位上下文的属性——这类属性会强制fixed元素以该父元素为定位容器，而非视口。要恢复视口定位，需给子元素显式清除这类属性影响：

.child {
  /* 原有样式保留 */
  position: fixed;
  transform: none; /* 抵消父元素可能设置的transform影响 */
}

（注：此处transform: none仅用于修复定位基准，并非用于居中，不属于禁用场景）

2. 纯定位属性实现视口居中 #

在确保fixed以视口为基准后，利用top、left结合视口单位计算偏移量实现居中，无需margin或transform：

.child {
  /* 原有样式保留 */
  position: fixed;
  top: calc(50vh - 3vh); /* 视口垂直中心偏移自身高度的一半 */
  left: calc(50vw - 3vh); /* 视口水平中心偏移自身宽度的一半 */
}

这里通过calc计算定位偏移量，本质是利用top/left核心定位属性实现居中，完全符合要求。

修改后的完整代码：

.parent {
  height: 180vh;
  width: 100vw;
  border: solid 5px orange;
  /* 假设父元素存在transform属性，比如：transform: translate(0, 0); */
}

.child {
  height: 6vh;
  width: 6vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 0.5em;
  position: fixed;
  color: steelblue;
  cursor: pointer;
  transform: none;
  top: calc(50vh - 3vh);
  left: calc(50vw - 3vh);

  &.childOfChild { /* 三条杠图标 */
    width: 3vh;
    height: .25em;
    border-radius: .1em;
    margin: 3px;
  }
}

这样处理后，无论父元素高度如何变化，fixed子元素都会始终固定在视口中心，且满足所有限制条件。

内容的提问来源于stack exchange，提问作者ls170292