使位置固定不可滚动

Question

我想知道是否有办法使 div 的位置固定不动，所以如果用户滚动 div 将不动到初始位置。我需要它，因为我有一个吐司在另一个 div 中生成，我需要在前景中使用这个吐司，否则它会在 div 中生成（带有滚动条并且部分可见）。

这是一个示例图像，可以更好地解释：

使用绝对位置：

固定位置（预期效果）：

这是我的组件代码（它是一个子组件）：

        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position:absolute; z-index:999; left:80%; width:300px;opacity:1;cursor:unset !important" *ngIf="!isCollapsed && onlyOnePopup == dataItem.Id">
          <div class="toast-header" style="background-color: #00549F;">
            <strong class="mr-auto" style="color:#fff;"></strong>
            <button (click)="onlyOnePopup = null && isCollapsed = true" type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
              <span aria-hidden="true" class="close" style="color:white;">&times;</span>
            </button>
          </div>
          <div class="toast-body" style="font-family:Font; white-space:pre-line; color:black; cursor:unset">
            TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
          </div>
        </div>

Answer 1

使用position: fixed，然后设置您想要的确切位置。下面是一个片段，向您展示了如何执行此操作的示例。

body {
  height: 2000px;
  background-color: aqua;
}

.fixed-div {
  width: 200px;
  heigth: 200px;
  background-color: white;
  padding: 50px;
  
  position: fixed;
  top: 0px;
  right: 0px;
  margin-right: 20px;
  margin-top: 20px;
}

<html>
<head></head>
<body>
  <div class="fixed-div">
     Fixed Div
  </div>
</body>
</html>