網頁布局中position定位講解
定位（position）屬性有4個屬性值，分別是static、relative、absolute、fixed。本文重點講解relative（相對定位）和absolute（絕對定位）。
東西/材料
Adobe Dreamweaver CS5
操作方式
-
01
相對定位(relative)長短常輕易把握的概念，通俗一點就是正常的塊級定位，只不外塊級的位置是經由過程top、left、right、bottom屬性來進行劃定。不外，本來所占用的空間并沒有消逝。起首先來正常的定位，如下圖。
-
02
然后在正常定位的里面，操縱position：relative來相對定位，relative屬性值的父元素就是上圖塊元素，如下圖。
-
03
絕對定位(absolute)第一個特征就是會從文檔流中離開，不占有任何空間。它的定位屬性也是跟相對定位一樣，經由過程top、left、right、bottom來進行劃定，如下圖。
-
04
一個父元素里面包含多幾個絕對定位，若是絕對定位元素重疊在一路，如下圖，A和B重疊在一路了，需要A在前面B在后面，我們只需要在A里面添加z-index來節制。
，我們可以操縱z-index來節制哪個在前，哪個在后，如下圖。 -
05
可是必然要切忌，如若屬性值為absolute，那么必然要共同relative為父元素的塊來利用。若是沒有共同，如下圖。會直接以body為父元素。
-
06
靜態定位(static)一般不利用，它的屬性值界說為沒有定位，元素呈現在正常的流中。忽略top, bottom, left, right，如下圖。
-
07
固心猿意馬定位（fixed）屬性值的界說為瀏覽器窗口進行定位。通俗一點就是父元素為body，經由過程top, bottom, left, right來節制位置。如下圖定位在relative里面，然而并沒有用果。
- End
出格提醒
- 發表于 2018-03-08 00:00
- 閱讀 ( 614 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章