固定div位置，不随滚动条上下动

更多2019年的技术文章，欢迎关注我的微信公众号：码不停蹄的小鼠松（微信号：busy_squirrel），也可扫下方二维码关注获取最新文章哦~

1、position

div中的style属性中的一个关键字，表明了该div所在的位置以及位置本身的属性。

position有四个值可选：static，absolute，fixed，relative。

若要使得div相对于浏览器窗口固定，即不随滚动条的变化而上下移动，可以用fixed属性。最近比较忙，抽不出时间来具体的写详细用法，具体的用法见：http://blog.csdn.net/marty_zhu/article/details/1910597

还有一点要指出的是：我用bootstrap3开发的界面，本来一行分为12个栅格，但是如果使用了fixed属性，会破坏bootstrap3中设定的栅格的格式，所以，为了在界面上达到想要的效果，就要结合js去设置div的高度、宽度、内边距padding、外边距margin等。

2、js获得当前窗口的高度和宽度

高度可以用$(window).height()获得，宽度可以用$(window).width()获得。这里的高度、宽度指的是当前浏览器窗口的大小。

对于获得div的高度和宽度，用

var height = document.getElementById("divId").offsetHeight;
var width = document.getElementById("divId").offsetWidth;

 

设置div的高度：

document.getElementById("divId").height = height;
document.getElementById("divId").width = width;

 

 

 

3、div置于最前面，即div之间的覆盖问题

style属性中有一个"z-index"关键字，可以设定多个div之间的覆盖关系。数值越大，表示越在上层。

可参考：http://blog.sina.com.cn/s/blog_5bd6b45101014h2i.html

4、div的透明设置

还是style属性中的"opacity"关键字。范围从0~1。0表示全透明，1表示不透明。

 

更多2019年的技术文章，欢迎关注我的微信公众号：码不停蹄的小鼠松（微信号：busy_squirrel），也可扫下方二维码关注获取最新文章哦~