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

最新推荐文章于 2024-05-16 17:14:39 发布

策码奔腾的小单

最新推荐文章于 2024-05-16 17:14:39 发布

阅读量1.8w

点赞数 1

分类专栏： web前端文章标签： div 最前端固定位置当前窗口高度和宽度 div透明设置

本文链接：https://blog.csdn.net/shansusu/article/details/42706683

版权

9 篇文章 1 订阅

订阅专栏

更多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之间的覆盖关系。数值越大，表示越在上层。

4、div的透明设置

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

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

关注