当 div 位于固定的父 div 内时，如何定位相对于 body 固定的 div？

Question

我目前正在开发一个CSS布局，其中我有一个包含另一个div的固定父div。我希望内部 div 相对于主体固定，而不是其父级。

代码（顺风）：

<div class="h-screen bg-red-100">
  <div class="fixed left-1/2 top-1/2 h-80 w-80 -translate-x-1/2 -translate-y-1/2 bg-red-300">
    <div class="fixed top-10 h-40 w-40 bg-red-600">I want to make this div fixed relative to body</div>
  </div>
</div>

顺风游乐场

有没有一种方法可以在不使用 JavaScript 的情况下实现这一目标？如果没有，我如何使用 JavaScript 来完成它？

我也在 Stack Overflow 上进行了广泛的研究和搜索，但我找不到符合我的确切要求的解决方案。

谢谢！

Answer 1

您是否尝试过添加position：相对于嵌套div？ 摆弄 CSS 示例

.container-div {
  padding: 10px 10px 0;
background-color:#c3c3c3;
width:200px;
}

.child-div {
  display: inline-block;
  width: 100px;
  height: 60px;
  position:relative;
    top:-20px;
  border: 1px solid #efefef;
  background-color: #f5f5f5;
}

<br><br><div class="container-div">
  <div class="child-div">
This div appears to be nested.
  </div>
</div>