我想将粘滞的div从站点上的空间中排除.它按照预期工作,并固定在所需的位置.

enter image description here

超文本标记语言

  <div v-if="isToastActive" class="toast">
    <span class="message">{{ messageRef }}</span>
  </div>

CSS

.toast {
  position: sticky;
  left: 100%;
  bottom: 0rem;
  max-width: fit-content;
  background-color: #22bb33;
  color: white;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
}

所以我的问题是:

我怎么能把粘粘的 cogo toast 从滚动条上go 掉呢?

推荐答案

TL;DR:使用position: fixed

在我看来,你试图让元素留在那个地方,而不管父容器,所以try position: fixed而不是粘性

通常使用位置粘滞将元素粘在体内较小容器的某个边界上

当你试图在你身体内的某个地方"固定"一个位置时,更好的方法就是固定位置

Html相关问答推荐

css网格区域的布局不展开,也不显示滚动条

防止SVG边框半径zoom

如何在R中渲染Quarto文档时动态设置html文件名

Html视频标签:圆角像素化

带有图标和悬停过渡的CSS按钮

旧文本淡出,但新文本不会淡入,而是突然出现

如何删除FONT创建的文本下方的空格

如果使用复选框属性更改,如何防止事件更改?

R 中的网页抓取数字?

我在桌面版 html css 代码上给出了位置 margin-left margin-top 标签,如何将其删除到手机上以使其响应?

如何将内容放置在侧边栏旁边?

如何调整边框半径以匹配父边框半径

HTML画布放大/缩小算法与CSS(图像处理)

标签背景 colored颜色 的 html 和 css 技巧说明

如何将图像移动到父容器的右侧?

为什么相同持续时间的转换需要不同的时间?

使用 CSS 样式化进度条

变换元素以适应高度(Angular,SCSS)

在部分而不是正文中定义页面宽度

两个按钮范围滑块的 CSS