admin管理员组文章数量:1321067
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 notfixed
or it's inside an iframe. – adeneo Commented Apr 6, 2015 at 11:03
4 Answers
Reset to default 7what 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
版权声明:本文标题:javascript - Element position fixed is related to parent instead to the viewport - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742091062a2420269.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论