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

【问题标题】：Element position fixed is related to parent instead to the viewport固定的元素位置与父级相关，而不是与视口相关
【发布时间】：2017-10-06 20:28:36
【问题描述】：

正在努力实现：

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

我在做什么：

设置位置：固定；到元素
计算右侧和顶部相关并设置在元素上

发生了什么？

元素随心所欲
但是在模态中具有相同样式（固定位置和右上方）的元素相对于他的父级定位（在引导模态中发生）

代码示例 元素样式：

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

图片：

【问题讨论】：

你的模态是 iframe 吗？
你能发布你的html吗？
我认为你的模态有 position:relative;
没有办法，当设置fixed时，元素没有空间了。相反，它位于相对于屏幕的视口 的指定位置，并且在滚动时不会移动。如果您的元素正在执行其他操作，则它不是 fixed 或者它在 iframe 中。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

发生了什么（据我了解）

模态容器具有（来自引导程序）转换的默认值：translate(0, 0);

根据 w3 规范：

position:fixed 的元素总是相对于初始包含块。

W3 Wiki

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

和

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

所以通过上面提到的，翻译转换将模态设置为“初始包含块”，用于他内部的固定元素而不是正文。

【讨论】：

【解决方案2】：

TL;DR:

用

覆盖特定模态的.modal-dialog

transform: none;

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我认为这与模态 div 相关。检查你是否在模态 div 上给了position:relative。如果您这样做了，请删除 position:relative 并将 position:relative 设置为视口

喜欢

.view-port{
position:relative
}

【讨论】：