CSS定位屬性:
◆bottom、left、right和top
◆position
◆clip
◆float
◆clear
◆overflow
◆z-index
該類屬性設置元素在父級元素中的位置。在設置這類元素時,如果設置長度數值,均以px作為單位,在通過style對象讀取屬性時,返回帶單位的字符串。
1.邊偏移(bottom,left,right和top)
作用:設置元素距離參照元素的底邊、左邊、右邊、頂邊的距離。
取值:屬性值可以為數值或百分比。數值表示與參照元素之間的距離,單位為像素px;百分比表示參考父元素寬度的百分比。默認值為0。
top:定義元素相對于其父元素上邊線的距離。
2.定位模式(position)
作用:決定元素在文檔中的定位方式。
取值:可取值包括absolute,relative和static。
absolute表示絕對定位方式。當一個元素A采用絕對定位方式時,則A下的子元素將以A的左上角頂點作為坐標原點進行定位。而對于元素A,瀏覽器將在元素A所屬的子節點樹中尋找上一個采用absolute定位方式或者relative定位方式的元素A-P,以A-P的左上角頂點作為參照點確定元素A的位置,如果找不到,則以文檔左上角頂點作為參照點。
relative方式指元素相對于其相鄰非絕對定位元素的位置進行定位。當將元素A的position屬性設置為relative時,A下的子元素將以A的左上角頂點位置作為參照進行定位。對于A的位置,瀏覽器將尋找與元素A最近的前一個(并不一定是在其子節點樹中)position屬性不是absolute或者relative的元素,以該元素作為參照確定當前元素A的位置,如果找不到,則以文檔左上角頂點作為參照點。在相對定位時,A元素的left屬性指相對于參照元素左邊的距離,而top指相對于參照元素底邊的距離。
static方式為默認方式,表示元素在文檔中的位置由網頁根據各元素的先后順序自然排列,此時,元素各位置參數,如left和top均無效。
fixed元素將從頁面元素中獨立出來,但其位置是相對于屏幕本身,而不是文檔的本身。
3.clip
作用:為層設置一個矩形可視區域,頁面中只顯示位于可視區域內的內容,可視區域外的內容透明,其效果相當于將可視區域之外的部分切除。該屬性只有在position的值設置為absolute時才能正常使用。
取值:屬性值可以為auto(自動)或者rect(數值)。其中,數值為一組4個帶單位數值,各數值以空格隔開。4個數值依次表示可視區域的頂邊、右邊、底邊、左邊距層左上角的距離,即可視區域的頂邊、底邊距層元素的頂邊的距離,可視區域的右邊、左邊距層元素左邊的距離。
4.float
作用:設置元素浮動在相鄰元素周圍,例如使圖像浮動的文字周圍,產生文字環繞效果。
新聞熱點
疑難解答