首頁 > web前端 > css教學 > 主體

css如何固定住元素不變

醉折花枝作酒筹
發布: 2023-01-05 16:08:13
原創
4901 人瀏覽過

在css中,可利用position屬性讓元素固定不變;只需為元素新增「position:fixed」樣式,進行固定定位即可。固定定位相對於視窗進行定位,無論是否移動滑動條,都固定在相對於視窗的固定位置;其他元素在位置排布上將會忽略其存在。

css如何固定住元素不變

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

#ads{
    position:fixed;
    right:0;
    bottom:0;
    border:1px solid red;
    width:300px;
    height:250px;
}
登入後複製

我們定義一個#ads的id樣式,並給他設了一個高度寬度,透過position:fixed以及right、bottom將元素定位在視窗右下角。

但在IE6下,並不支援position:fixed屬性,這時候我們需要對IE6進行hack處理。解決的方案是使用 postion:absolute屬性,它的作用大家都很熟悉,相對於父元素進行絕對定位,然後我們可以透過expression來改變#ads的top 值。

expression的定義:IE5及其以後版本支援在CSS中使用expression,用來把CSS屬性和Javascript 表達式關聯起來,這裡的CSS屬性可以是元素固有的屬性,也可以是自訂屬性。是說CSS屬性後面可以是一段Javascript表達式,CSS屬性 的值等於Javascript表達式計算的結果。在表達式中可以直接引用元素本身的屬性和方法,也可以使用其他瀏覽器物件。這個表達式就好像是在這個元素的一個成員函數中一樣。

所以我們可以透過在css裡計算javascript值來改變top值,程式碼如下:

#ads{
    _position:absolute;
    _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
}
登入後複製

似乎一切都完美了,但是我們在IE6下運行的時候會發現,隨著滾動條的移動,我們的這個#ads朋友他會抖動。解決方法也很簡單,只要在body裡加一點點的css,如下:

body{
    background-image:url(about:blank); /* for IE6 */ 
    background-attachment:fixed; /*必须*/
}
登入後複製

完整的程式碼:

body{
    background-image:url(about:blank); /* for IE6 */ 
    background-attachment:fixed; /*必须*/
}
#ads{
    width:300px;
    height:250px;
    position:fixed;
    right:0;
    bottom:0;
    _position:absolute;
    _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
    border:1px solid red;
}
登入後複製

推薦學習:css影片教學

#

以上是css如何固定住元素不變的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!