网页固定漂浮导航栏制作(仿天涯)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页固定漂浮导航栏制作</title> <style type="text/css"> body { background-image:url(text.txt); /* for IE6 */ background-attachment:fixed; } #bottomNav { background-color:#096; z-index:999; position:fixed; bottom:100px; left:0; width:100%; _position:absolute; /* for IE6 */ _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible; } </style> </head> <body style="height:3300px"> <div id='bottomNav'>固定漂浮物在此处O(∩_∩)O~</div> </body> </html>

提示：你可以先修改部分代码再运行。

提示：
1. _top:是只管IE6的，
2.
static 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。

relative 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。

absolute 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。

fixed 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。

转载请注明：有爱前端 » 网页固定漂浮导航栏制作(仿天涯)