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

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转换规范

因此,通过上面提到的,Translate变换将模态设置为他内部的固定元素而不是主体的"初始包含块".