1. 程式人生 > >固定div位置,不隨滾動條上下動

固定div位置,不隨滾動條上下動

1、position

div中的style屬性中的一個關鍵字,表明了該div所在的位置以及位置本身的屬性。

position有四個值可選:static,absolute,fixed,relative。

還有一點要指出的是:我用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表示不透明。