CSS中定位屬性的常見屬性值

在使用css對頁面布局時，我們常會使用到定位屬性，定位主要應用於乙個元素在另外乙個元素之上，或者我們需要在網頁中精準地確定某乙個元素的位置，並且這個元素有明確的參照物。其常見的屬性值有五個：

一、position：static；預設值

預設值通常沒有任何布局效果，定位中的static也是這樣的存在。

二、position：absolute；絕對定位

絕對定位就是我們較常使用的乙個屬性值了，其特點如下：

1、脫離文件流：也就是當乙個元素被加上絕對定位之後，該元素便懸空了，並不佔空間，下面的元素如果沒有定位則會頂到上面，佔據其空出來的位置，但元素本身視覺上仍在原來的位置，後來居上的元素相當於站在其身後，原有的字元也被擋住。當然如果多個元素同時給了絕對定位，他們之間的層疊順序是：誰的結構在後誰顯示在最上面。

.box1 .box2

兩個色塊都沒有加定位---------->給box1新增絕對定位---------->兩個色塊都加絕對定位

2、元素移動位置時的參照物：絕對定位之後想要移動位置，可以用margin或者用left、top、bottom、right屬性移動位置，移動時參照物為瀏覽器的第一屏，需要注意的是，當設定right=100px;指的是當前被定位的元素距離瀏覽器第一屏最右邊的距離為100px。如下圖：

但若是該元素有父元素且父元素也設定了定位（絕對、固定、相對均可），那麼它移動時參照物就是父元素了。也就是當設定 right=100px;指的是當前被定位的元素距離其父元素最右邊的距離為100px。

如果想要改變定位之後這些元素的層疊順序，可以通過z-index屬性改變，z-index值預設為0，值越大層越靠上，沒有最大值也沒有最小值。

三、position：fixed；固定定位

固定定位也是我們較常使用的乙個屬性值，其特點如下：

1、給元素固定定位以後一樣會脫離文件流，但與絕對定位不同的是該元素會固定在某個位置不動，就是不論你如何滾動螢幕，該元素都固定不動。

2、用top、left、right、bottom移動位置的時候含義同絕對定位，但是參照物只會是瀏覽器的當前視窗。

3、多個元素同時給了固定定位，預設後面寫的元素會蓋在最上面，當然固定定位的層疊順序也可以用z-index改變。

四、position：relative；相對定位

相對定位也是我們較常使用的乙個屬性值，其特點如下：

1、不脫離文件流，相對定位之後，該元素仍然佔據原有的位置。這對於位於其後的元素布局是很有必要的。

2、與其它定位更為不同的是，相對定位的元素利用left、top、bottom、right移動位置的時候參照物是自己的初始位置，而且移動位置之後，原來的空間還在。

3、多個元素給完相對定位之後，如果沒有移動位置，那麼他們之間就不會覆蓋現象。也可以通過z-index改變層疊順序。

五、position：sticky；粘性定位

css3新增屬性值，相容性較差，可用來做導航的吸頂效果

【注】：我們通常看到的網頁導航欄居於網頁頭部下方，並且隨著螢幕的滾動可以看到網頁下面的內容，而在瀏覽下方內容的同時導航欄或者搜尋欄會被吸附在瀏覽器頂端不動。這樣的效果我們稱為吸頂效果。

CSS中定位屬性的常見屬性值

CSS中的定位屬性

CSS中常見屬性和值盒子和定位

CSS常見的屬性和值

CSS中定位屬性的常見屬性值

CSS中的定位屬性

CSS中常見屬性和值 盒子和定位

CSS常見的屬性和值

相關推薦

CSS中常見屬性和值盒子和定位