css中position屬性定位:absolute與relative

2016年12月8日11:54:23 發表評論

阿里云服務器

定位層是由html元素(標簽)形成的一個特殊的box盒子。其重點在于“定位”,而html元素(標簽)的定位方式由css來控制。通常情況下,html元素(標簽)默認的定位方式叫作“靜態定位”,存在于普通文檔流中。而定位層是指的那些修改了定位方式的box,即非靜態定位的box。

定位層的“定位”需要根據參照對象來實現定位的位置。定位層的主要作用是來實現小范圍內容元素的排版和定位。

css中position屬性定位:absolute與relative

position規定html元素的定位類型

說明 參照對象
static 默認值,靜態定位 無定位,html元素出現在默認文檔流中,是默認的定位方式。
absolute 絕對定位 相對于非satic定位的第一個父元素進行定位
reletive 相對定位 相對自身默認文檔流中的正常位置進行定位
fixed 絕對定位 相對于瀏覽器窗口進行定位(即使窗口是滾動的也不移動)

當html元素(標簽)被設置成定位層之后,可以激活定位相關的屬性設置

說明
top 規定定位元素的上邊界與參照對象之間的距離偏移
right 規定定位元素的右邊界與參照對象之間的距離偏移
bottom 規定定位元素的下邊界與參照對象之間的距離偏移
left 規定定位元素的左邊界與參照對象之間的距離偏移

這4個定位控制屬性均可以使用負值。同方向有沖突時,則top、left優先。

position定位與float一樣,也是css排版中非常重要的概念。position從字面意思上看就是制定塊的位置。即塊相對于其父塊的位置和相對它自身應該在的位置。absolute絕對定位例子如下圖:代碼顯示如左,效果圖顯示如右;

css中position屬性定位:absolute與relative

上圖總結:當將子塊的position設置為absolue時,子塊已經不再從屬于父塊,其左邊框設置的距離是相對頁面body的距離,而不是它的父塊father的距離,因absolute絕對定位已經使元素脫離文檔流。

如果div里有兩個盒子,各獨立占一行,當給盒子1設置position為absolute時,它就不再隸屬于父塊了,因此盒子2代替盒子1成了父塊中的第一個盒子(即父塊的最上面)。代碼如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position:absolute</title>
<style>
body {
margin: 20px;
font-size: 14px;
}
#father {
background-color: #377BE5;
border: 1px dashed #000;
width: 500px;
height: 500px;
}
#box {
background-color: #EBE482;
border: 1px dashed #000;
padding: 20px;
position: absolute; ? ? /*absolute絕對對定位*/
left: 38px; ? ? ? ? ? ?/*box的左邊框距離頁面左側38px(即距離body左側38px,不是距離它的父元素father);*/
top: 58px; ? ? ? ? ? ?/*box的上邊框距離頁面頂部40px(即距離body頂部58px,不是距離它的父元素father)*/
}
#box2 {
background-color: #39EC6A;
border: 1px dashed #000;
padding: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="box">absolute</div>
<div id="box2">box2</div>
</div>
</body>
</html>

css中position屬性定位:absolute與relative

當將塊的position參數設置為relative時,與將其設置為absolute時完全不同,這時子塊是相對于自身在父塊的原先位置來進行定位的,如下:

#box {
background-color: #EBE482;
border: 1px dashed #000;
padding: 20px;
position: relative; ? ? ? /*relative相對定位*/
left: 18px; ? ? ? ? ? ? ?/*box的左邊框距離它原來位置的18px*/
top: 38px; ? ? ? ? ? ? ? /*box的上邊框距離它原來位置的38px*/
}

將子塊position屬性設置為relative時,子塊仍然屬于基父塊,只是相對于自己在父塊中的原先位置有了移動改變。

z-index屬性用于調整定位時重疊的上下位置,當塊設置了position屬性時,該值便可設置各塊之間的重疊高低關系。默認值為0,沒有單位。z-index的值允許設置負值。當值為負值時,定位層處于普通文檔流之下,會被覆蓋。

maolai

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: