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.
keep fixed div within its container
Hope this helps.
DEMO
$(document).scroll(function() { var $self = $("#fixedDiv"); $self.css('margin-top', 0); var fixedDivOffset = $self.offset().top + $self.outerHeight(true); // if reaches footer if (fixedDivOffset > ($("#footer").offset().top - 30)) { $self.css('margin-top', -(fixedDivOffset - $("#footer").offset().top)); } else { $self.css('margin-top', '30px'); }});
#container { width: 600px;}
#text { width: 200px; padding: 10px; display: inline-block; vertical-align: top;}
#fixedDiv { position: fixed; width: 100px; height: 175px; margin-top: 30px; background-color: #DB1926; color: white; padding: 10px; display: inline-block; vertical-align: top;}
#footer { width: 90%; height: 700px; margin-top: 20px; background-color: #451870; color: white; padding: 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="container"> <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc scelerisque elit elit, ac aliquet augue congue id. Suspendisse hendrerit lorem quis ante fringilla, nec consequat nulla egestas. Praesent lobortis felis ut ex congue, at lobortis justo blandit. Praesent convallis metus et finibus venenatis. Phasellus et sapien at augue porta venenatis. Phasellus justo turpis, tempus ut eros sit amet, tristique iaculis lectus. Curabitur facilisis dolor nibh, rutrum accumsan lacus suscipit et. Nulla ut ornare ante, eu pellentesque odio. Pellentesque non facilisis felis. Sed congue arcu at turpis finibus, non facilisis sapien pretium. Nulla finibus cursus hendrerit. Cras nec neque at ipsum lobortis accumsan id at sem. Donec dignissim, velit id interdum ornare, magna augue suscipit risus, ut iaculis eros urna ut orci.</div>
<div id="fixedDiv">fixedDiv</div></div>
<div id="footer">Footer. The fixedDIv should not scroll over this Footer.</div>
Related Topics
How to Force Inline-Block Elements to Wrap
Using CSS to Create Custom Borders with Just the Corners Showing
Assigning Visible Property of the Button to a Static Method Result
Limit Initial Width of Select List
Flex Direction: Row-Reverse in React-Native
How to Make a Scrollable Element Fill 100% of the Remaining Height of a Parent Element
Style Lower and Upper Fill in HTML5 Range Input
Problem with Odd/Even Child Elements in Nth-Child
Jquery-Mobile Page Transitions - Flickering (Separate Pages)
How to Write A:Visited in Inline CSS
CSS - How to Select Multiple Different Child Elements Within a Parent Without Repeating the Parent
Force Elements to Be Horizontally Aligned
How to Create a 'Parallelogram' Shape in CSS with a Straight Side
Why Is It Impossible to Change Content in CSS