html固定广告位置,如何将广告始终定位到网页右下角

互联网提供了很多种“将广告始终定位到网页右下角”的解决方案，大多会用到javascript，其实仅调用样式表就可以实现该效果。

万恶的代码主要是写给IE6的，在IE7和FF浏览器中，只需要position:fixed就可以将图层定义到网页的任意位置。演示页面如下：

fixd-layer-in-ie6

有一句非常重要的话需要理解。

fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。

才知为什么position:absolute;很多地方都给出了结果，但未能解决。因为html被设置position:relative。我们拉动滚动条，内容随窗口滚动；这时滚动的是body。如果让绝对定位的父级元素定为body，刚我们需要固定的某个模块将会固定在网页的某个位置，而不是固定在窗口的某个位置(貌似在firefox中，html与body之间的介限并不明确?)。

我们需要做的是，让body保持其原有高度，让html只有一个窗口那么高。代码我们可以这样写：

html{overflow:hidden;} // 重要！

body{height:100%;overflow:auto;}

这时，html将只有一个窗口那么高，超过的，直接hide。而body会随高度自动变化。这时，我们可以利用绝对定位来定位我们想要固定在窗口某个位置的模块。假设我们要固定的内容在右上角，代码可以这样写：

#rightform

form{position:absolute;right:30px;top50px;}

这样，窗口就固定在右上角了。而其他浏览器，我们可以用position:fixed;来解决固定的问题。其他浏览器完整的代码如下：

-------------------------css----------------------------

#rightform {text-align:center;padding:50px;font:14px/22px

Georgia, "Times New Roman", Times,

serif;height:1200px;background:#ffc;}

#rightform h1

{font-family:arial;background:#e8edef;height:300px;line-height:300px;margin-bottom:200px;}

#rightform p {line-height:1.5em;background:#ffdfff;padding:90px

0;}

#rightform form {background-color:#ddd;padding:10px 20px;border:1px

solid #aaa;position:fixed;right:30px;top:120px;}

--------------------------html-----------------------

IE6

position:fixed bug

position:fixed;

vs position:absolute;

from

>前端开发-武方博

action="#">

value="" />

value="search" />