javascript - Element position fixed is related to parent instead to the viewport - Stack Overflow

admin管理员组

文章数量:1325231

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:

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:

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Apr 6, 2015 at 10:58 CuziCuzi 1,0261111 silver badges1616 bronze badges 4

• And is your modal by any chance an iframe ? – adeneo Commented Apr 6, 2015 at 10:59
• Can you post your html? – Michelangelo Commented Apr 6, 2015 at 11:01
• I think your modal has position:relative; – Ashot Khanamiryan Commented Apr 6, 2015 at 11:02
• There's just no way, When setting fixed there's no space left for the element. Instead, it's positioned at a specified position relative to the screen's viewport and not moved if scrolled. If your element is doing something else, it's either not fixed or it's inside an iframe. – adeneo Commented Apr 6, 2015 at 11:03

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

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.

TL;DR:

Override the specific modal's .modal-dialog with

transform: none;

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.

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
}

本文标签： javascriptElement position fixed is related to parent instead to the viewportStack Overflow