Element position fixed is related to parent instead to the viewport
Cuzi
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: 
Cuzi
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.
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
Related
Related Related
- 1
Position fixed within container element instead of the browser / viewport
- 2
Position fixed within container element instead of the browser / viewport
- 3
Pin element like position: fixed but inside its parent not the viewport
- 4
css "fixed" child element positions relative to parent element not to the viewport, why?
- 5
Bootstrap: Element with position fixed inside modal not aligned with respect to the viewport
- 6
Position fixed relative to a block, not to the viewport
- 7
Make position: fixed element respect parent with position: relative
- 8
Make position: fixed element respect parent with position: relative
- 9
How to position a child element at the bottom of a fixed position parent
- 10
scroll property in a child element of a parent div whose position is fixed
- 11
CSS position fixed div still displayed in respect to parent element
- 12
How to set a div percentage width with a fixed position based on the parent element
- 13
Keep element position fixed to parent using transform on scroll
- 14
Position fixed 100 of parent
- 15
Get element position in viewport as percentage
- 16
Fixed div related to its parent
- 17
Position:fixed element within a position:relative parent. Which browser renders correctly?
- 18
Get position relative to parent not viewport on mousedown / touchstart
- 19
Position a fixed element below another fixed element
- 20
Detect whether an element has position:fixed (possibly by parent element) via jQuery
- 21
Stop jQuery fixed position scrolling when bottom of scrolling element reaches end of parent element
- 22
Stop jQuery fixed position scrolling when bottom of scrolling element reaches end of parent element
- 23
Fixed position relative to parent container
- 24
Fixed position element inside absolute position element
- 25
Fixed position element inside absolute position element
- 26
Get an element position relative to the top of the viewport
- 27
Fixed element positioned relative to the viewport(left) and static element (right)
- 28
Fixed element positioned relative to the viewport(left) and static element (right)
- 29
How to make a fixed-position element inside a clip-path parent stay above all elements?
Comments