CSS中的position屬性

2021-10-06 01:28:35 字數 856 閱讀 3402

在html中網頁可以看成乙個立體的空間,乙個完整的頁面是由很多個頁面堆積形成的,如下圖所示

css中position屬性有四個可選值,它們分別是:static、absolute、fixed、relative。

◆position:static 無定位

該屬性值是所有元素定位的預設情況,在一般情況下,我們不需要特別的去宣告它,但有時候遇到繼承的情況,我們不願意見到元素所繼承的屬性影響本身,從而可以用position:static取消繼承,即還原元素定位的預設值。

◆position:absolute 絕對定位

使用position:absolute,能夠很準確的將元素移動到你想要的位置,

◆position:fixed 相對於視窗的固定定位

這個定位屬性值是什麼意思呢?元素的定位方式同absolute類似,但它的包含塊是視區本身。在螢幕**如web瀏覽器中,元素在文件滾動時不會在瀏覽器視察中移動。例如,它允許框架樣式布局。在頁式**如列印輸出中,乙個固定元素會出現於第一頁的相同位置。這一點可用於生成流動標題或腳注。我們也見過相似的效果,但大都數效果不是通過css來實現了,而是應用了js指令碼。

請特別注意,ie6不支援css中的position:fixed屬性。真的非常遺憾,要不然我們就可以試試這種酷酷的效果了。

◆position:relative 相對定位

所謂相對定位到底是什麼意思呢,是基於**的相對呢?我們需要明確乙個概念,相對定位是相對於元素預設的位置的定位。既然是相對的,我們就需要設定不同的值來宣告定位在**,top、bottom、left、right四個數值配合,來明確元素的位置。

CSS中的Position屬性

size large size large css的position很重要,有以下幾個值 static,relative,absolute,fixed。static 靜態定位。如果你沒有設定position屬性,那麼預設就是static。top,left,bottom,right等屬性,在stati...

css中的 position屬性

當前元素是文件流,並且處於自己應該在的位置。一般我們不需要設定這一屬性,除非想要覆蓋之前設定的定位。當前元素是文件流,沒有設定top bottom left和right屬性時是在他本來的位置上,但是可以通過設定top bottom left和right屬性來對元素進行移動,元素的移動會覆蓋下面的文件...

CSS中position屬性解析

css中的position屬性有static,relative,absolute和fixed四個。他們之間的區別是什麼呢?position屬性的預設值是static。主要是要弄清楚兩個問題 物件能不能被定位 即通過top,left,bottom,right能不能定義物件的相對偏移量 物件定位的參考點...