javascript - Angular/CSS/Javascript 创建一个可以突破包含 div 限制的弹出窗口

我有一个 Angular 元素，其中有一些组件在其他组件内部运行，我想做的是创建一个弹出组件，无论从何处触发，它都具有相同的大小和位置。

我得到了改用 Bootstrap 模态的建议，但运行了 into this problem trying to implement它在 Angular 。虽然该问题可能已解决，但 div 脱离其包含的 div 的问题仍然存在。

我一直在寻找不同的方法来执行此操作，但没有找到在不知道确切的页面位置时可以应用的任何解决方案。

我想要的是一个 div，它具有在 html 中以绝对位置放置的 div 的属性，我的意思的一个例子:

<html>
  <body>
    <div class="absolute_div" style="position:absolute; height:80%; width:80%; left:10%; right:10%; margin:0; padding:0;">
    </div>
    <div class="some_content" style="position: relative; height: xx; width: xx">
      <div class="target_div_to_break_out" style="position:absolute; height:80%; width:80%; left:10%; right:10%; margin:0; padding:0;">
      </div>
    </div>
  </body>
</html>

我希望包含的 div target_div_to_break_out 具有与 absolute_div 相同的属性，但我不知道如何实现。

在实际用例中有<app-popup></app-popup>另一个潜水内的标签，我非常想突破并被视为包含 div 的外部。

由于我为此使用 Angular，如果使用 Typescript/javascript 的解决方案在 CSS 中不容易实现，则非常受欢迎。

基本上，我希望包含的 div 覆盖整个页面的 80%，而不管它放置在其他 div 中的什么位置。

最佳答案

而不是使用绝对定位(它将相对于它的第一个定位祖先定位，即.some-content)，你应该使用fixed 定位，这将相对于整个视口(viewport)进行定位。

可以找到有关 CSS 位置的更多信息 here

关于javascript - Angular/CSS/Javascript 创建一个可以突破包含 div 限制的弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51456683/