CSS to keep element at fixed position on screen
You may be looking for position: fixed
.
Works everywhere except IE6 and many mobile devices.
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
Keep element fixed while absolutely positioned in a scrolling element
You can use position sticky
to "stick" an element to a scrollable element. Position sticky fluctuates the position of an element between static
and fixed
depending on the scroll position.
Since you cannot use bottom
with position: sticky
, you have to use top
instead, and calc()
the margin from the top using the known height of your button, in this case 30px
.
.add {
height: 30px;
position: sticky;
float: right; /* go to the right */
right: 16px;
top: calc(100% - 30px - 16px);
}
Center a position:fixed element
If your div has a known width and height, then you basically need to set top
and left
to 50%
to center the left-top corner of the div. You also need to set the margin-top
and margin-left
to the negative half of the div's height and width to shift the center towards the middle of the div.
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */
Or, if your div has a dynamic/undefined width and/or height, then instead of the margin
, set the transform
to the negative half of the div's relative width and height.
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Or, if your div has at least a fixed width and you don't care about centering vertically and old browsers such as IE6/7, then you can instead also add left: 0
and right: 0
to the element having a margin-left
and margin-right
of auto
, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:
position: fixed;
width: 500px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;
Again, this works only in IE8+ if you care about IE, and this centers only horizontally not vertically.
Make div stay at bottom of page's content all the time even when there are scrollbars
This is precisely what position: fixed
was designed for:
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
Here's the fiddle: http://jsfiddle.net/uw8f9/
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.
How can I make a div stick to the top of the screen once it's been scrolled to?
You could use simply css, positioning your element as fixed:
.fixedElement {
background-color: #c0c0c0;
position:fixed;
top:0;
width:100%;
z-index:100;
}
Edit: You should have the element with position absolute, once the scroll offset has reached the element, it should be changed to fixed, and the top position should be set to zero.
You can detect the top scroll offset of the document with the scrollTop function:
$(window).scroll(function(e){
var $el = $('.fixedElement');
var isPositionFixed = ($el.css('position') == 'fixed');
if ($(this).scrollTop() > 200 && !isPositionFixed){
$el.css({'position': 'fixed', 'top': '0px'});
}
if ($(this).scrollTop() < 200 && isPositionFixed){
$el.css({'position': 'static', 'top': '0px'});
}
});
When the scroll offset reached 200, the element will stick to the top of the browser window, because is placed as fixed.
Related Topics
Inline Svg Vs Svg File Performance
Slant The Top of a Div Using CSS Without Skewing Text
Twitter Bootstrap: Column Re-Ordering for Full Width Divs
Can HTML5 Websockets Connect 2 Clients (Browsers) Directly Without Using a Server? (P2P)
How (And Why) to Use Display: Table-Cell (CSS)
How to Squircle an App Icon Image with Just CSS
How to Remove Only Underline from A:Before
How to Semantically Provide a Caption, Title or Label for a List in HTML
Insert HTML with Scripts That Should Run
CSS Border on Png Image with Transparent Parts
Websocket Server Implementations for Delphi
Redirect Mobile Devices to Alternate Version of My Site
Svg Animation Delay on Each Repetition
What Is The 'Lang' Attribute of The <HTML> Tag Used For
CSS Grid with Variable Number of "Auto" Rows, But One Row Should Take "1Fr"