Menu
position: sticky that is a new way to position elements that is conceptually similar to position: fixed . The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport.
A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.
position:static; , position:absolute; , and position:relative; are the alternatives to position:fixed; . There isn't a definitive opposite, because relative , absolute , static , and fixed have different properties to behave differently.
Simply add DocType Tag on top of the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
What sorted my problem with IE was the code in:
http://annevankesteren.nl/test/examples/ie/position-fixed.html
basically added:
h1{
position:fixed;
_position:absolute;
top:0;
_top:expression(eval(document.body.scrollTop));
}
for fixed position in IE 8 DOCTYPE is very very important.
one of:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
or
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
or
<!DOCTYPE HTML>
And its very very important that
css:
#footer
{position: fixed; right: 0px; bottom: 0px; }
html:
<div id="footer" >
Fixed Div
</div>
IE6 doesn't support position fixed.
If you really need this to work in IE6, use conditional comments to serve an IE only CSS file and fake position:fixed with CSS expressions.
(edited to correct IE version info.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With