css position 屬性詳解

2021-07-10 09:41:51 字數 1270 閱讀 3946

相信很多同學在編寫、設計**的時候多多少少用過css裡的position這個屬性,但是很多時候網頁顯示出來的和自己想象的不太一樣,這篇部落格來教你怎麼使用position。

position屬性共有5個不同的值,下面是w3school給出的**解釋:

其中,如果不對dom中的元素設定position屬性,那麼預設值為static,也就是說此時設定top, bottom, left, right和z-index都是無效的。

先來看乙個栗子,後面都會圍繞這個栗子來講述: jsfiddle演示(

首先,元素#inner1的position為absolute,意味著它脫離了dom tree的約束,當top, bottom, left, right四個屬性沒有被設定,並且父元素裡沒有其它元素在dom tree裡位於它前面時,它將位於父元素的左上角;當有其它元素在它前面時,它將位於此元素下面的左上角;當top, bottom, left, right四個屬性被賦值時,它的位置將相對於瀏覽器視窗來定,比如設定 將位於整個瀏覽器視窗的左上角,並不會隨視窗滾動而滾動。前面說的兩種情況都是針對父元素為static的情況,如果父元素為relative,則即使子元素設定了absolute,也將永遠相對于父元素來定位(此技巧可用於網頁區域性區域內的元素定位,比float好用)。

再來看元素#inner2,它是relative的,意味著將相對於正常位置(static)來移動。#inner2的left屬性被設為100px,它的位置緊挨著#inner1,而這個也證實了absolute的元素確實脫離了dom tree,不然#inner2將距離#inner1 100px。

為了解釋inherit和z-index,我又設定了乙個#inner3元素,它的position值繼承了父元素#outer,也就是relative。此時你可以看到它預設位於前兩個子元素的上方,是因為在dom tree裡它位於前兩個子元素後面,並且z-index沒有被賦值。此時如果你將我注釋掉的那行**(z-index: -1)取消注釋,重新run一次會發現它位於了前兩個子元素的下方。這個是因為z-index預設值為0,0比-1大。注意,父元素#outer的z-index也被設為了-1,如果父元素的z-index也是預設值0的話,那麼子元素#inner3將會父元素下方,我們也就看不見了。

關於fixed屬性,我沒有給出例項,因為它比較簡單。position的值被設定為fixed的元素不會隨著瀏覽器視窗的滾動而移動,永遠固定於目前視窗的某個位置。可以經常看到很多**的頂部導航欄或者文件**的左側導航欄都做了類似的處理。

CSS position屬性用法

絕對定位 position absolute 有如下兩種情況 1,沒有設定 top right bottom left 的情況,預設依據父級的 內容區域原始點 為原始點 2,有設定 top right bottom left 的情況,這裡又分了兩種情況如下 1 父級沒 position 屬性,瀏覽器...

CSS position 屬性分析

position是css重要的屬性,通過設定position,可以把元素放置到乙個靜態的 相對的 絕對的或者是固定的位置中。position有以下五個屬性 在某些資料 中,可能只會介紹前四個屬性 值描述 static 預設值,設定了static的屬性,沒有定位,它會出現在正常的流中。relative...

CSS Position 定位屬性

本篇文章主要介紹元素的position屬性,此屬性可以設定元素在頁面的定位方式。1.介紹 position 介紹position的值以及輔助屬性。2.position 定位方式 介紹position的四種定位方式 絕對 相對 固定 預設。3.總結 position 以示例的方式展示position。...