CSS中怎么利用position:fixed屬性固定定位

本篇文章給大家分享的是有關CSS中怎么利用position:fixed屬性固定定位，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

使用CSS的position:fixed

Position的英文原意是指位置、職位、狀態。也有安置的意思。在CSS布局中，Position發揮著非常重要的作用，很多容器的定位是用Position來完成。

Position屬性有四個可選值，它們分別是：static、absolute、fixed、relative。

position:fixed 相對于窗口的固定定位

這個定位屬性值是什么意思呢？元素的定位方式同absolute類似，但它的包含塊是視區本身。在屏幕媒體如WEB瀏覽器中，元素在文檔滾動時不會在瀏覽器視察中移動。例如，它答應框架樣式布局。在頁式媒體如打印輸出中，一個固定元素會出現于***頁的相同位置。這一點可用于生成流動標題或腳注。我們也見過相似的效果，但大都數效果不是通過CSS來實現了，而是應用了JS腳本。

注意：IE6不支持CSS中的position:fixed屬性。

我們都知道CSS中定位屬性position的值，除了默認的值外，還有absolute,relative和fixed。我平時比較常用absolute和relative，而position:fixed卻沒多關注。或許是因為當初在CSS中文手冊中看到position:fixed旁邊有說明“IE5.5及NS6尚不支持此屬性”吧。

前段時間，在做一個項目時需要使一個層相對于瀏覽器邊框固定，那時用position:absolute試了下，發覺absolute是對網頁邊框而言的。后來，上網查了一些根據滾動條的移動，動態地改變left和top的值的JavaScript語句，雖然能實現了類似的效果，但滾動條移動時，那個層晃來晃去的，感覺不好看，想要一種能使層固定不動的做法。

且看下面的代碼：

<style type="text/CSS"> <!--  #help{      width:30px;      height:20px;      background-color:green;      position:fixed;      left:60px;      top:100px;  }  --> </style>

我們用上面這段代碼來定義頁面上的一個層“help”（id=“help”）。這樣就能實現我們想要的效果了。在IE8、Firefox、Opera、Google等瀏覽器中測試，都沒有問題，唯獨低版本的IE中，這個屬性無效。

以上就是CSS中怎么利用position:fixed屬性固定定位，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。