gpt4 book ai didi

html - 使位置固定不可滚动

转载 作者:行者123 更新时间:2023-12-03 15:47:57 25 4
gpt4 key购买 nike

我想知道是否有办法使 div 的位置固定不动,所以如果用户滚动 div 将不动到初始位置。我需要它,因为我有一个 toast 在另一个 div 中生成,我需要在前景中使用这个 toast ,否则它会在 div 中生成(带有滚动条并且部分可见)。
这是一个示例图像,可以更好地解释:
使用绝对位置:
enter image description here
固定位置(预期效果):
enter image description here
这是我的组件代码(它是一个子组件):

        <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>

最佳答案

使用 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>

关于html - 使位置固定不可滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64826672/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com