固定的元素位置与父级相关，而不是与视口相关

Question

试图实现：

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

我在做什么：

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

• 计算右侧和顶层相关并将其设置在元素上

会发生什么？

• 元素任何地方的行为是我想要的

• 但是在模态中具有相同样式（固定位置和右上角）的元素相对于他的父级定位（它发生在自举模式上）

代码示例 元素风格：

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

图片：

Answer 1

发生了什么（据我所知）

模态容器具有（来自bootstrap）默认值transform：translate（0,0）;

w3规范：

  具有position：fixed的

元素始终相对于初始包含块。

W3 Wiki

  

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

和

  

对于布局由CSS框模型控制的元素，转换的除none之外的任何值都会导致创建堆叠上下文和包含块。该对象充当固定定位后代的包含块。   W3 Transform Specification

因此，通过上面提到的，Translate变换将模态设置为他内部固定元素而不是正文的“初始包含块”。

Answer 2

TL; DR：

使用

覆盖特定模式的.modal对话框

transform: none;

Answer 3

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

尝试删除为关键帧动画编写的类并检查。它可能会奏效。

Answer 4

我认为这与模态div有关。检查你是否对模态div给了position:relative。如果你这样做，删除位置：relative并使位置：相对于视口

喜欢

.view-port{
position:relative
}