CSS屬性之定位屬性詳解

定位是網頁的一種布局方式。

文件流定位是指：

文件流定位，物件遵循常規流，此時四個偏移屬性（top、right、bottom、left）不會被應用。

box1 box2 box3 頁面中的塊級元素從上到下乙個接乙個排列。每個塊級元素均以新的一行開始排列。

效果如下：

文件流是常見的一種定位方式。

無論什麼元素新增浮動效果，均為其新增塊級框。

float: left; 向左浮動。

float: right; 向右浮動。

clear: both; 清除浮動。

注：

文件流是對於盒子模型來說的。

文字流是對於文字段落來說的。

為元素新增浮動效果時，會使其元素脫離

文件流

，也就是說當它後面還有元素時，其它元素會

無視

它所佔據的區域空間，直接在它下面或者它原來的位置布局；但文字段落、文字文字會認同浮動元素所佔的區域空間，圍繞它周圍布局，也就是說沒有脫離文字流。

例：我們只為box2新增向右浮動的效果：

.box2

效果如下：

可以發現，box2浮動到了右邊，而box3佔據了box2原來的區域。那是因為box2新增浮動效果後，box2塊級脫離了文件流，而緊跟它後面的元素塊級box3會無視它的所佔的區域，直接在它浮動前的區域布局。此時box1（塊級元素）沒有浮動效果，所以沒有被其它元素無視它的佔據區域。

此時同時我們為box1新增向左浮動效果：

.box1 .box2

效果如下：

此時box1、box2均脫離了文件流，後面的其它元素會無視掉box1、box2所佔據了的區域，box3直接在box1下布局，box1佔據的區域被無視後，box2就跟它在同一行上布局了。

此時可以發現，box3的邊框不見了，這時我們只需清除box3的浮動效果即可。即：clear: both;

.box1 .box2 .box3

效果如下：

我們只為box2新增浮動效果，並在box2後新增一段文字文字。

.box2

box2 頁面中的塊級元素從上到下乙個接乙個排列。頁面中的塊級元素從上到下乙個接乙個排列。

效果如下：

可以看出，文字文字會圍繞在box2周圍布局。說明文字文字會認同浮動元素所佔據的區域。並未脫離文字流。

相對定位：遵循文件流，且以自己本身為參照物（在定位之前的位置），通過四個偏移屬性（top、right、bottom、left）進行偏移。不會影響文件中的元素。

絕對定位：脫離文件流，以離自己最近定位的祖先元素（position）為參照物，如果沒有定位的祖先元素，則追溯到以body為參照物，通過四個偏移屬性進行偏移，不會影響文件中的元素，其margin不會與其它margin重疊。

固定定位：與絕對定位一致，以視窗為參照物，當出現滾動條時，元素不會隨著滾動。

以下列事例說明：

層級關係：

可以看出設定為絕對定位的box2會以最近定位的藍色div為參照物，而不會以最遠定位的橙色div為參照物來偏移的。

若此時我們取消藍色div的定位屬性，即：層級關係為

此時box2會以唯一的乙個定位的橙色div為參照物來偏移的。

若我們不為任何元素設定相對定位，即層次關係為：

此時發現box2是以body為對照物來偏移的。

僅使用margin為絕對定位的元素布局的情況：

當元素被設定為絕對定位時，也說明此元素已脫離了文件流，若此時僅用margin屬性對元素布局，不管其元素有沒有定位的祖先元素，都只以本身在文件流中原來的位置為參照物。

固定定位（fixed）：與absolute一致，以視窗為參照物，當視窗出現滾動條時，不會隨著滾動條滾動。若沒有設定偏移屬性值，則以元素在文件流中原來的位置的top、left值為屬性值

.div2 .box1 .box2

效果：

以上可以看出，box2以視窗為參照物，left值為120畫素，而因未設定top偏移值，所以以原來的位置的top值為偏移值。

一旦設定了定位，一般是絕對定位(absolute)，則可以會發生元素重疊的現象，有時會看不見我們想看見的元素。

z-index可以用來控制重疊元素出現的順序，數值越高，優先權越高，離使用者越近，使用者越容易看見。

box1 box2 box3 頁面中的塊級元素從上到下乙個接乙個排列。每個塊級元素均以新的一行開始排列。

效果：

本來按照文件流，出現在使用者眼前是黃色背景，但我們設定為藍色背景的層疊順序優先權最高，所以出現在使用者眼前的是藍色背景。

CSS屬性之定位屬性詳解

CSS定位屬性詳解

CSS定位屬性詳解

CSS定位屬性postiion詳解

CSS屬性之定位屬性詳解

CSS定位屬性詳解

CSS定位屬性詳解

CSS定位屬性postiion詳解

相關推薦