作者adahsu (路邊的垃圾筒)
看板Web_Design
標題Re: [請益]relative和absolution的問題
時間Sun Mar 22 03:23:38 2009
※ 引述《pullow (皮爾卡稱)》之銘言:
: 其中html裡面有兩個div包著的白色文字,一個使用relative,一個使用absolution
: 這兩組文字很明顯的可以看出,只要調整瀏覽器大小,位置就會隨之變動
: 我想問的是,要怎麼做才能使文字隨瀏覽器解析度及尺寸不同而位置仍在同樣地方
懶的下載了,不過覺得您可能未能理解這兩個設定的意義,
簡單說明一下 4 個 position 的意義好了...
1. position: static
別以為看到 static 就表示它會靜靜的待在那邊。請換個角度來看,
您應該認定為它會靜靜的接受瀏覽器安排位置。通常這個位置
可以稱之為『排版基準點』,每排完一個元素後就會重新指定
這個基準點的位置以便進行下一個元素的排版程序。
2. position: relative
顧名思義,relative 指的就是相對位置,但相對於那個位置呢?
是指相對於前述的『排版基準點』進行排版,只要指定 top, left 之值後
就可以原地挪移、精準定位這個元素的位置。
3. position: absolute
一樣望文生義,absolute 指的是絕對位置,但這個絕對位置是以父容器
左上角位置為參考點。設定方式是指定 top, left, right, bottom 之值
即可。但是如果同時指定 left, right 之值時,在 Fx 下等於重設元素
寬度;至於 IE6 好像是堅持保留元素的 width 值,此時排版時是使用
left 還是 right 值就需要想辦法生一份 ie6 出來確認了!
如果元素的父容器是 body 時,那麼在不超過螢幕畫面大小的頁面下就
可以有元素固定在畫面上某個地方的錯覺,但若頁面資料超過一頁時只需
稍微捲動一下頁面就會破功。原 PO 或許可以從想辦法限制畫面資料在一
頁內的方式進行可行性評估。
4. position: fixed
其實這就是原 po 想要的功能吧!元素只要設定成此模式後即可指定
將之固定在瀏覽器螢幕畫面上的指定位置且不受父容器 position 設定影響。
IE 似乎從 7.0 後開始支援!
以上簡單報告完畢,該睡了!
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.130.11.7
推 ateclean:4.fixed可以用hack 或是js解 03/22 08:47
推 edia0912:謝謝這篇原po 解決我一個大大大大大問題>"<!!!!! 11/13 11:43