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

Question

trying to achieve:

position element in fixed right and top relative to the viewport

what I am doing:

• set position: fixed; to the element

• calculate the right and the top related and set it on the element

what happen?

• element any where is act as i wanted

• but Element with the same styling (fixed position and right & top) in modal get positioned relative to he's parent (it's happen on bootstrap modal)

code example element style:

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

images:

Answer 1

what happen (as i understand)

modal container has (from bootstrap) defaults of transform: translate(0, 0);

by the w3 specification :

element with position:fixed are always relative to the initial containing block.

W3 Wiki

Some values of these properties result in the creation of a containing block

and

For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants. W3 Transform Specification

So by the mentioned above, the Translate transform is setting the modal as "the initial containing block" for the fixed element inside him instead of the body.

Answer 2

TL;DR:

Override the specific modal's .modal-dialog with

transform: none;

Answer 3

This could happen if there are any css keyframe animations written on any of its parent elements.

Try removing the class written for keyframe animations and check. It might work.

Answer 4

I think this fixed related to modal div. check did you gave position:relative on modal div. if you did this remove the position:relative and make the position:relative to view port

like

.view-port{
position:relative
}