CSS中position的幾個屬性值

2021-09-01 00:27:04 字數 1336 閱讀 2286

[b]position的四種取值 :[/b]

static:static定位就是不定位,出現在**就顯示在**,這是預設取值,只有在你想覆蓋以前的定義時才需要顯示指定

relative:relative 就是相對元素static定位時的位置進行偏移,如果指定static時top是50象素,那麼指定relative並指定top是10象素時,元素實際top就是60象素了。

absolute:absolute絕對定位,直接指定top、left、right、bottom。有意思的是絕對定位也是「相對」的。它的座標是相對其容器來說的。容器又是什麼呢,容器就是離元素最近的乙個定位好的「祖先」,定位好的意思就是其position是absolute或fixed或relative。如果沒有這個容器,那就使用瀏覽器初始的,也就是body或者html元素。標準是說只需要指定left和right,width可以自動根據容器寬度計算出來,可惜ie不支援。

fixed:fixed才是真正的絕對定位,其位置永遠相對瀏覽器位置來計算。而且就算使用者滾動頁面,元素位置也能相對瀏覽器保持不變,也就是說永遠可以看到,這個做一些彩單的時候可以用。可惜的是ie還不支援

[b]relative,absolute,fixed需要指定具體位置 [/b]

relative,absolute,fixed如果不指定它的top,left等屬性,那麼它的position實際上依然是static。使用了relative,absolute,fixed就必須指定具體的位置。

有時候我們需要針對某乙個容器的懸浮效果,而不是針對視窗的。這時候通過高度、寬度的計算不但麻煩,而且幾乎無法完美實現效果。我一開始也無能為力,後來發現只要把其上一級的樣式屬性 position設定為relative就可以了。

也就是說,position的屬性值的效果,直接受其容器樣式中position屬性值影響。

例如如下a-b的巢狀結構

有時候我們需要針對某乙個容器的懸浮效果,這時候通過高度、寬度的計算不但麻煩,而且幾乎無法完美實現效果。只要把其上一級的樣式屬性 position設定為relative就可以了。

也就是說,position的屬性值的效果,直接受其容器樣式中position屬性值影響。

例如如下a-b的巢狀結構

當a的position為relative時,b的position為absolute才有效。這時候left:0、top:0就不再針對視窗文件,而是針對id為a的這個div了。

image.src = img.src;得到原影象的原大小

fdsadsa

前端中的幾個position

最近乙隻大四狗在準備面試,所以整理一波概念。static 無特殊定位,物件遵照html的定位規則 absolute 將 物件從文件流中拖出,使用 left right top bottom 等屬性,相對根元素進行絕對定位 其根元素可以自己設定,如果其父元素設定為relative,那麼根元素就是其父元...

關於css中的position

對於position的幾個屬性 static 無特殊定位,物件遵循html定位規則 absolute 將物件從文件流中拖出,使用left,right,top,bottom等屬性進行絕對定位。而其層疊通過z index屬性定義。此時物件不具有邊距,但仍有補白和邊框 relative 物件不可層疊,但將...

css中的定位(position)

w3c中對position各個 屬性值定義 static 元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,行內元素則會建立乙個或多個行框,置於其父元素中。relative 元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所佔的空間仍保留。absolute 元素框從文件流完全刪除,並...