最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin2浏览0评论

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:

Share Improve this question asked Apr 6, 2015 at 10:58 CuziCuzi 1,02611 silver badges16 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

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
}
发布评论

评论列表(0)

  1. 暂无评论