元素的fixed定位与父级相关而非视口相关

Question

想要实现的效果：

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

我的做法：

• 将position设置为fixed;

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

发生了什么？

• 元素在任何位置都按照我想要的方式进行定位

• 但是，采用相同样式（固定位置和右上角）的元素在模态框中相对于父级定位（在Bootstrap模态框中发生这种情况）

代码示例：元素样式：

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

images:

- Cuzi

---

你的模态框是否是一个 iframe？ - adeneo

你能发布你的HTML吗？ - Michelangelo

我认为你的模态框有position:relative;属性。 - Ashot Khanamiryan

根本没有办法，当设置 fixed 时，元素没有留下空间。相反，它被定位在相对于屏幕视口的指定位置，并且如果滚动，则不会移动。如果您的元素正在执行其他操作，则要么它不是 fixed，要么它在 iframe 中。 - adeneo

Answer 1

发生了什么（据我理解）

模态框容器具有（来自Bootstrap的）默认值：transform: translate(0, 0);

根据w3规范：

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

W3 Wiki

某些属性值会导致创建一个包含块

并且

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

因此，通过上述提到的内容，Translate变换将模态框设置为“初始包含块”，以替代body中的固定元素。

- Cuzi

Answer 2

简述：

使用以下代码重写特定模态框的 .modal-dialog:

transform: none;

- downhand

Answer 3

我认为这个问题与 modal div 有关，检查一下你是否在 modal div 上加了position:relative。如果是的话，请移除 position:relative，并将其设置为相对于视口的position:relative。

例如：

.view-port{
position:relative
}

- Muthukumar

Answer 4

如果其任何父元素上有CSS关键帧动画编写，就可能会发生这种情况。

尝试删除用于关键帧动画的类并检查。这可能有效。

- Kiran Reddy