Javascript 元素位置固定与父对象相关，而不是与视口相关

努力实现：

相对于视口将元素定位在固定的右侧和顶部

我在做什么：

• 设置位置：固定；到元素

• 计算右侧和顶部的相关值，并将其设置在元素上

发生了什么事？

• 元素的任何位置都可以按我的要求进行操作

• 但是模式中具有相同样式（固定位置和右上方）的元素相对于其父元素进行定位（这发生在引导模式上）

代码示例 元素样式：

.fixed-floater {
  top: 300px;
  right: 151px;
  text-align: left;
  display: block;
  min-width: 180px;
  position: fixed;
  z-index: 999;
  padding: 4px;
}

图像：

---

如果在其任何父元素上写入任何css关键帧动画，则可能发生这种情况

---

尝试删除为关键帧动画编写的类并选中。它可能会工作。

我认为此修复与模态div有关。检查您是否在模态div上给出了位置：相对。如果您这样做，请删除位置：相对，并使位置：相对查看端口

像

发生了什么（据我所知）

模态容器具有（从引导）transform的默认值：translate（0，0）

根据w3规范：

位置为“固定”的图元始终相对于初始包含块

这些特性的某些值会导致创建包含块

及

对于布局由CSS框模型控制的元素，转换的任何值（none除外）都会创建堆叠上下文和包含块。对象充当固定定位子体的包含块。

因此，通过上述方法，平移变换将模态设置为其内部固定元素的“初始包含块”，而不是身体。

TL；博士：

用替换特定模态的.modal对话框

transform: none;

---

你的模态是iframe吗？你能发布你的html吗？我认为你的模态有位置：相对；在设置

fixed

时，没有任何空间可供元素使用。相反，它位于相对于屏幕视口的指定位置，如果滚动，则不会移动。如果您的元素正在执行其他操作，则它不是

固定的

，或者它在iframe中。

transform: none;