关于CSS的position细说

position 对html元素定位，分为四种：

static：默认，正常文档流定位

relative：相对位置，也是正常文档流定位，相对于static的位置进行定位

有top、bottom、left、right追加属性，分别对应该组件如果是static的位置

的偏移量

absolute：绝对定位，相对于最近的非static父元素进行定位，top、bottom、left、right相对于父元素偏移量，忽略掉父元素的padding属性；如果没有父元素是非static的，以body为参考（但是如果设置bottom为0，也是以可视范围为参考定位）

fixed：固定定位，以浏览器的当前可视窗口为定位，并且通过top、bottom、left、right进行固定，不随滚动条变化发生位置改变

实战：网页底部栏（各个网站底部的footer栏）

content

分析：如果使用static，如果网页内容很短，那么这个footer可能出现在屏幕中央。不太和谐；如果使用relative和static没多大分别；如果使用absolute，当前可能在底部，但是滚动条滚动后，就会随滚动条发生位置改变；使用fixed，可以确保固定在底部，但是如果要求不是可视范围底部，而是网页底部（滚动条），那么也是不可行

所以必须使用js进行处理

!(function() {

varwh=window.innerHeight;

varft=document.querySelector("footer");

varfth=ft.scrollHeight;

vartop=sh>wh?sh-fth:wh-fth;

})();