position: fixed not woking when parent has the transform CSS property
This is not a bug.
Take a look at the spec: The Transform Rendering Model
Specifying a value other than ‘none’ for the ‘transform’ property
establishes a new local coordinate system at the element that it is
applied to.
So according to the spec: the element with fixed positioning will become relative to the element with the transform - not the viewport
As a workaround you could:
1) Use transitions (eg. on the left
property) instead of transform (translateX
)
2) Remove the position:fixed
button from the container which uses transforms
How to force position fixed when parent container has a transformation?
The Answer is simple this is not possible with CSS. Visit the following question for details
Positions fixed doesn't work when using -webkit-transform
'transform3d' not working with position: fixed children
But you can achieve your target with js here is a basic example.
$(window).scroll(function() { $(".transform-fixed").css({ "top": $(window).scrollTop() });})
.rotate { transform: rotate(30deg); background: blue; width: 300px; height: 300px; margin: 0 auto; }.fixed { position: fixed; background: red; padding: 10px; color: white; top: 50px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html>
<body> <div class="rotate"> <div class="fixed transform-fixed"> I am fixed inside a rotated div.</div> </div> <div class="fixed"> I am fixed outside a rotated div.</div></body>
</html>
Positions fixed doesn't work when using -webkit-transform
After some research, there has been a bug report on the Chromium website about this issue, so far Webkit browsers can't render these two effects together at the same time.
I would suggest adding some Webkit only CSS into your stylesheet and making the transformed div an image and using it as the background.
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit-specific CSS here (Chrome and Safari) */
#transformed_div {
/* styles here, background image etc */
}
}
So for now you'll have to do it the old fashioned way, until Webkit browsers catch up to FF.
EDIT: As of 10/24/2012 the bug has not been resolved.
This appears to not be a bug, but an aspect of the specification due to the two effects requiring separate coordinate systems and stacking orders. As explained in this answer.
Keep element position fixed to parent using transform on scroll
Yeah you can do that with position absolute, provided the containing element is set to relative. You don't need the transform property at all.
.test {
width: 400px;
height: 400px;
border: 1px solid;
position: relative;
}
.box {
margin-top: 20px;
width: 300px;
height: 100px;
border: 1px solid red;
position: absolute;
}
Updated fiddle: https://jsfiddle.net/ds0vbtbt/1/
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Update: position: fixed
is always going to relative to the view-port - so if you change the window size it will be updated, but when scrolling it wont be. That said, Elements with transforms act as a containing block for fixed position descendants, so position:fixed under something with a transform no longer has fixed behavior. They do work when applied to the same element; the element will be positioned as fixed, and then transformed.
transform3d' not working with position: fixed children
This is because the transform
creates a new local coordinate system, as per W3C spec:
In the HTML namespace, 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.
This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.
There's not currently a work-around that I'm aware of.
It is also documented on Eric Meyer's article: Un-fixing Fixed Elements with CSS Transforms.
Element with position fixed is not sticking to parent element that has its position set to relative
position:fixed
is not relative to parent element, even if it has a position:relative
set. It's relative to the viewport. Here is what MDN says about it:
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a
transform
,perspective
, orfilter
property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values oftop
,right
,bottom
, andleft
.
You would wanna use position:absolute
instead if you want to position relative to parent element.
Can I position an element fixed relative to parent?
Let me provide answers to both possible questions. Note that your existing title (and original post) ask a question different than what you seek in your edit and subsequent comment.
To position an element "fixed" relative to a parent element, you want position:absolute
on the child element, and any position mode other than the default or static on your parent element.
For example:
#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }
This will position childDiv
element 50 pixels left and 20 pixels down relative to parentDiv's position.
To position an element "fixed" relative to the window, you want position:fixed
, and can use top:
, left:
, right:
, and bottom:
to position as you see fit.
For example:
#yourDiv { position:fixed; bottom:40px; right:40px; }
This will position yourDiv
fixed relative to the web browser window, 40 pixels from the bottom edge and 40 pixels from the right edge.
Related Topics
Why Do You Put a Display:Block on an "A" Tag That Is Inside a List
Chrome Dev Tools Rgba/Hsl Conversion to Some New Format
Svg <Mask> Tag Required for Firefox But Appears to Break CSS Mask in Chrome
Jquery Mobile Page Transition Without Jquery Mobile
Adding Class to Editorfor in MVC
Css: Skew a Buttons Border, Not the Text
How to Maintain a Circlur Shape of Element with Dynamic Content
CSS Is Not Loaded at All in Internet Explorer (Sec7113)
Ie Z-Index Trouble on Element with Transparent Background
How to Dynamically Load a CSS File into a Flex Application
Enforce Print Page Breaks with CSS
Bootswatch Theme in Shiny Flexdashboard R
Chrome Ignoring Flex-Basis in Column Layout