Fixed position but relative to container
Short answer: no. (It is now possible with CSS transform. See the edit below)
Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:
#fixedContainer {
position: fixed;
width: 600px;
height: 200px;
left: 50%;
top: 0%;
margin-left: -300px; /*half the width*/
}
http://jsfiddle.net/HFjU6/1/
Edit (03/2015):
This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%)
. This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%
) because it will be relative to the parent and not the element it's applied to. transform
behaves differently. Its values are relative to the element they are applied to. Thus, 50%
for transform
means half the width of the element, while 50%
for margin is half of the parent's width. This is an IE9+ solution
Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
If you want it to be centered, you can do that too:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Demos:
jsFiddle: Centered horizontally only
jsFiddle: Centered both horizontally and vertically
Original credit goes to user aaronk6 for pointing it out to me in this answer
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.
position fixed but relative to a container
When using position: fixed;
it fixes the element to the screen. You cannot position it relative to a element with CSS, in fact if you think about what position: fixed
does you would never want to position it relative to a element and thought of it sounds impossible to me. A fixed positioned element is is taken out of the flow so that it is relative to the viewport you cannot just put it back in the flow somewhere.
Responsive fixed position element relative to container
You can achieve that by adding condition in your js code to check that inner element is not going out of the parent.
$parent = $('.container');$elem = $parent.find('.element');$(window).scroll(function() { if (($(window).scrollTop() + $elem.height()) < ($parent.offset().top + $parent.height())) { $elem.css('top', $(window).scrollTop()); }}).trigger('scroll');
div { min-height: 200px; margin-left: 60px; background: #ccc; width: 300px;}
div.container { position: relative;}
div .element { min-height: 20px; width: 100%; background: #0f0; position: absolute; margin: 0; top: 0; left: 0;}
div.outer-div { min-height: 650px; margin-top: 40px;}body,p { margin: 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="container"> <div class="element"></div> <p>Another content inside container</p></div><div class="outer-div"> Another outer content. Element should not show over this div.</div>
fixed position for child elements during animation
Try setting the parent element to position: relative;
and the child element to either position: fixed;
or [position: absolute;
with the other positioning top: 50px; left: 0;
]. Try it if it would work.
Related Topics
Stretch Child Div Height to Fill Parent That Has Dynamic Height
Bootstrap 4 - Change Position of Carousel Controls
Css Customized Scroll Bar in Div
How to Force a Div Block to Extend to the Bottom of a Page Even If It Has No Content
I Do Not Want to Inherit the Child Opacity from the Parent in Css
Why Aren't My Grid-Template-Areas With Ascii Art Not Working
Using CSS to Affect Div Style Inside Iframe
How to Reverse an Animation on Mouse Out After Hover
Error: Css: Background:/Is an Incorrect Operator
How to Suppress Spacing Between Paragraphs of the Same CSS Class
How to Make Bootstrap 4 Columns Have a Height of 100%
How to Align a ≪Div≫ to the Middle (Horizontally/Width) of the Page
How to Style the Html5 Form Validation Error Messages With Css
Stretch and Scale a CSS Image in the Background - With CSS Only
Css3 Background Image Transition
How to Vertically Center Content With Variable Height Within a Div