CSS position屬性：fixed怎麼用的-css教學-PHP中文網

CSS position屬性：fixed怎麼用的

怪我咯

發布： 2017-06-22 10:16:31

原創

6807 人瀏覽過

osition屬性規定元素的定位類型，也就是建立元素佈局所用的定位機制。任何元素都可以定位，不過絕對定位或固定定位元素會產生一個區塊級框，而不論該元素本身是什麼類型。相對定位元素會相對於它在正常流中的預設位置偏移。

position屬性值除了預設的static外，還有relative、absolute、fixed，本文將聚焦在fixed屬性值。

一、position:fixed屬性的意義

fixed：產生絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置透過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

我們平常所說的固定定位指的就是fixed，設定了固定定位的元素不會跟著捲軸上下滾動。

二、一般的position:fixed; 實作方法

#top{position:fixed;bottom:0;right:20px}實作了id為top的元素固定在瀏覽器的底部和距離右邊20個像素的位置

#top{position:fixed;top:20px;right:20px}實作了id為top的元素固定在距離瀏覽器的頂部20個像素和距離右邊20個像素的位置

三、IE6下position:fixed; 實作方法

在IE6中是不能直接使用position:fixed; 。你需要一些CSS Hack 來解決它

相同的還是讓

...

元素固定在瀏覽器的底部和距離右邊的20個像素，這次的程式碼是：

#top{position:fixed;bottom:0;right:20px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

登入後複製

right 跟left 屬性可以用絕對定位的辦法解決，而top 跟bottom 就需要用上面的表達式來實作。其中在_position:absolute; 中的 _ 符號只有IE6 才能識別，目的是為了區分其他瀏覽器

1、使元素固定在瀏覽器視窗的頂部：

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));}

登入後複製

2、讓元素固定在瀏覽器視窗的頂部a像素的位置：

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));
_margin-top:a;
}

登入後複製

或

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+a));
}

登入後複製

3、讓元素固定在瀏覽器視窗的底部：

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

登入後複製

4、使元素固定在距瀏覽器視窗的底部b像素的位置：

#top{
_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
_margin-bottom:b;
}

登入後複製

或

#top{
_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||b)-(parseInt(this.currentStyle.marginBottom,10)||b)));
}

登入後複製

以上是CSS position屬性：fixed怎麼用的的詳細內容。更多資訊請關注PHP中文網其他相關文章！