在 CSS 中的 position 屬性預設為 static 其結果如下圖：
以絕對位置 (position: absolute) 而言，故名思義，它是以父元素的邊界為絕對起點。
例如如果我們設定 top: 50px ，那麼這個元素就會在距離父元素內容區上邊界 50px 的地方呈現，如下圖：
補充：如果父元素的 position 不是 absolute 或 relative 時，那麼元素的位置就會再對應到父元素的上層元素；
如果其親代元素的 position 都沒有設定 absolute 或 relative 時，就以螢幕視窗最大可視範圍邊界為基準。
而以相關位置 (position: relative) 而言，其意義就是相對於原本的位置。例如我們指定 top: 50px 時，
那麼這個元素就會從原本應該呈現的位置往下移動 50px 。如下圖，紅色虛線部份就是未設定 position: relative 前，元素原該應該在的位置：
那麼這個元素就會從原本應該呈現的位置往下移動 50px 。如下圖，紅色虛線部份就是未設定 position: relative 前，元素原該應該在的位置：
而固定位置 (position: fixed) 指的就是固定在螢幕視窗最大可視範圍上，如果不指定位置 (top, left, right, bottom) 時，那元素就會固定在原本的位置；
而指定位置後，就會以螢幕視窗最大可視範圍的邊界為絕對基準點。如果頁面內容超過螢幕視窗最大可視範圍大小時，
那麼不論我們如何捲動頁面，元素都會固定在螢幕視窗最大可視範圍上我們所指定的位置。
而指定位置後，就會以螢幕視窗最大可視範圍的邊界為絕對基準點。如果頁面內容超過螢幕視窗最大可視範圍大小時，
那麼不論我們如何捲動頁面，元素都會固定在螢幕視窗最大可視範圍上我們所指定的位置。
===========================================================================================
以下為position:fixed(不受捲軸影響的絕對位置)範例html程式碼，雖然很醜不過看得懂就好0.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
body{
pdding: 0;
margin: 0;
}
#container {
background-color: #000;
width: 100%;
float: left;
height: 1600px;
position: relative;
}
#test2 {
background-color: #0F0;
position:fixed;
top: 0;
left: 0;
height: 750px;
width: 25%;
}
#test1 {
float: left;
width: 30%;
height: 800px;
background-color: #CCC;
}
</style>
</head>
<body>
<div id="container">
<div id="test1"> id "test1" 的內容放在這裡</div>
<div id="test2"> id "test2" 的內容放在這裡</div>
</div>
</body>
</html>
沒有留言:
張貼留言