用戶(hù)體驗(yàn)分析：從Web到移動(dòng)應(yīng)用的設(shè)計(jì)思維轉(zhuǎn)換

發(fā)布時(shí)間：2016-11-24 文章來(lái)源：瀏覽次數(shù)：3150

在講解CSS定位前，首先要搞清晰以下幾個(gè)屬性的真正含義和區(qū)別，如下：
【 position:relative | absolute | static | fixed 】
A：相對(duì)定位（position: relative）：假如對(duì)某一個(gè)元素進(jìn)行相對(duì)定位，它將泛起在它所在的位置上。然后，可以通過(guò)設(shè)置垂直（或水平)位置（top,right,bottom,left四值），讓這個(gè)元素"相對(duì)于"它的出發(fā)點(diǎn)進(jìn)行移動(dòng)。注：設(shè)置為相對(duì)定位的元素框會(huì)偏移某個(gè)間隔。元素仍舊保持其不決位前的外形，它原本所占的空間仍留存；
B：絕對(duì)定位(position: absolute)：絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，所以不會(huì)占用空間。與相對(duì)定位不同，相對(duì)定位實(shí)際上被看作普通流定位模型的一部門(mén)，由于元素的位置相對(duì)于它在普通流中的位置。注：設(shè)置為絕對(duì)定位的元素框從文檔流完全刪除，并相對(duì)于其包含塊定位，包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)封閉，就似乎該元素原來(lái)不存在一樣。元素定位后天生一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中天生何種類(lèi)型的框；
C：固定定位(position: fixed)：固定定位元素的位置總以視窗左上角定位；注：IE6不兼容此屬性；
D：static ：沒(méi)有特別的設(shè)定，遵循基本的定位劃定，不能通過(guò)z-index進(jìn)行層次分級(jí)；
【定位原理：在文本流中，所有元素的位置都受文本流的限制，但我們可以通過(guò)CSS樣式去改變這些元素的位置(如：margin，float)；實(shí)在真正意義上的位移是通過(guò)top，right，bottom，left來(lái)實(shí)現(xiàn)的】
A：position: relative：被相對(duì)定位元素不會(huì)脫離文檔流，它會(huì)參考自身靜態(tài)位置的左上角，通過(guò) top，right，bottom，left進(jìn)行位置移動(dòng)。注：相對(duì)定位層原有位置還會(huì)繼承占用文檔流；
紅色區(qū)域被相對(duì)定位后，相對(duì)A點(diǎn)通過(guò)top:20px，left:15px進(jìn)行位移，但相對(duì)定位層的原有位置還會(huì)繼承留存；

B：position:absolute：被絕對(duì)定位元素會(huì)脫離文檔流，且會(huì)選取自己最近的父級(jí)定位元素，通過(guò) top，right，bottom，left進(jìn)行位置移動(dòng)。注：當(dāng)父級(jí)position屬性是static時(shí)，absolute位移定位置將以body的原點(diǎn)坐標(biāo)進(jìn)行計(jì)算；如下圖：紅色區(qū)域被絕對(duì)定位后，被定位層脫離文檔流；假如A點(diǎn)層是 relative（或 absolute時(shí)，即紅色區(qū)域的父級(jí)），被定位層會(huì)以A點(diǎn)坐標(biāo)通過(guò)top:20px，left:15px進(jìn)行位移；當(dāng)父級(jí)沒(méi)有定位時(shí)，文檔以body的原點(diǎn)坐標(biāo)通過(guò)top:20px，left:15px進(jìn)行位移;

【定位的實(shí)際應(yīng)用】
題目一：
IE6本身不支持position: fixed屬性，但可以通過(guò)hack的方法解決此題目，如下：
position: fixed;top: 0;left:0; /* 除ie6之外的瀏覽器執(zhí)行此樣式 */
_position:absolute:_top:expression(documentElement.scrollTop + 0 + "px"); /* 僅ie6執(zhí)行此樣式 */
題目二：
當(dāng)絕對(duì)定位和相對(duì)定位配合使用時(shí)，在IE6下會(huì)產(chǎn)生一個(gè)奇偶BUG;當(dāng)相對(duì)定位層的寬度值是奇數(shù)時(shí)，絕對(duì)定位層的位置是上右（或下右）時(shí)，在IE6下右側(cè)會(huì)泛起1像素的間隙；反之當(dāng)相對(duì)定位層的高度是奇數(shù)時(shí)，絕對(duì)定位層的位置是左下（或右下）時(shí)，在IE6的下方會(huì)泛起1像素的間隙；所以當(dāng)采用定位時(shí)，相對(duì)定位層盡量避免使用奇數(shù)數(shù)值；假如必需使用奇數(shù)值，可以通過(guò)HACK方法給IE6單獨(dú)書(shū)寫(xiě)數(shù)值（如left:0px；_left:-1px;）；
上面所說(shuō)定位原理都是單獨(dú)的使用方法，而在實(shí)際應(yīng)用中我們總會(huì)使用一些特別的形式；即但愿元素具有絕對(duì)定位特性的同時(shí)，又但愿絕對(duì)定位的坐標(biāo)原點(diǎn)可隨意固定在網(wǎng)頁(yè)的某一點(diǎn)上，當(dāng)這個(gè)相對(duì)點(diǎn)隨意移動(dòng)時(shí)，絕對(duì)定位層可以隨之改變位置，也就是絕對(duì)定位層可以跟著網(wǎng)頁(yè)移動(dòng)；假如想實(shí)現(xiàn)這種定位方式，必需在這個(gè)絕對(duì)定位層的父級(jí)設(shè)置相對(duì)定位值，那么絕對(duì)定位層就會(huì)以父級(jí)的坐標(biāo)原點(diǎn)為坐標(biāo)起始原點(diǎn)；此方法在網(wǎng)頁(yè)制作中使用的比較廣泛，如下：
1. 動(dòng)彈圖的左右按鈕（index_zuo,index_you）樣式是絕對(duì)定位,它的父級(jí)（rollBox）樣式是相對(duì)定位；

2.頭像層（pic）樣式是絕對(duì)定位，它的父級(jí)（box）樣式是相對(duì)定位；

諸如斯類(lèi)的實(shí)際應(yīng)用還有良多，如下拉菜單，焦點(diǎn)圖，輪播圖和一些不規(guī)則的復(fù)雜結(jié)構(gòu)都會(huì)用到此類(lèi)定位方式；
因?yàn)槭袌?chǎng)的各類(lèi)瀏覽器類(lèi)型較多，對(duì)CSS定位的支持也略有不同，其中IE6的題目相對(duì)較多，需要根據(jù)不同情況進(jìn)行不同的調(diào)試；

上一條：威客網(wǎng)站該怎樣在尷尬中前...

下一條：企業(yè)網(wǎng)站如何進(jìn)步內(nèi)容的相...