與工程師的協作之路-那些年，我們一起混淆的CSS（一）
雖然現在是UI Designer…但其實我是從網頁設計師起家的，也因此比較能跟工程師溝通一點點他們的語言！
所以說，就算沒有要跨工程，我也建議設計師們能夠知道一些基礎！
當你理解了HTML架構，做設計的時候，就比較不會創造一些天馬行空、氣死工程師們的版面！（例如說動一改十那種「Super angry 極度焦躁」的畫面）或是連自己都說不出所以然的…美感？
況且我認為身為UI Designer，知道越多、了解越多是越好的！當你接觸的越廣，各種層面思維都漸漸能夠掌握，也就能做出更「合理」的設計，記住：設計是來解決問題的，不是搞藝術！
（有沒有要這麼嚴肅啊！）（沒有，對不起。）
如果你們公司或團隊，有「前端」一職，大致會分成兩派：（先不說又分為前端工程師與前端設計師這回事）
設計轉前端
後端轉前端
扣除掉那些大腦神強樣樣行的狀元們…
（瞧你年紀輕輕一身橫練的筋骨… 簡直是百年一見的練武奇材…）
大概會發現，設計轉前端這類的人，在切版邏輯、細緻度掌握得比較到位；
而後端轉前端者，則是程式邏輯特強，能躺著就不坐著（？），各種精簡易於維護的神code大多出自這類人之手！
我正好趨近於前者（但沒真的跨過去當前端），今天我們就來看一下當初學習時，那些怎麼看就是意圖使人覺得自己像個笨蛋的CSS吧！！
position
我曾經在朋友的版上看見他對於relative和absolute的疑惑，那就先拿這個來玩一下！position的屬性：
- static
- relative
- absolute
- fixed
- inherit
static
這是position的默認值。
撇除掉改變元素本身的其他語法，這時候的流動方式是「由上而下」、「由左至右」，各個元素依照各自默認的呈列狀態（區塊或行間，在你還沒改掉的狀況下），再照上述這樣的方向去排列！
relative
這是告訴瀏覽器「以此為對齊對象」的意思，通常要搭配absolute使用。
absolute
這是告訴瀏覽器「這東西要拿來對齊」的意思。
如果這個元素的所有父層都沒有設定relative，那就會以「整個畫布」（也就是你的瀏覽器視窗）為主。
fixed
這是告訴瀏覽器「 我就是要在畫面上的這個位置！ 不管父層怎麼設定或是我該怎麼流動！」
總之就是個任性的屬性（喂！），所以可以的話盡量注意不要濫用！
PM「這個在這邊不顯眼，我要放這裡（指）」
RD「好」
Designer「咦？這什麼時候改了！這樣原本的這個（指）就不明顯了呀！那我要改到這裡（指）」
RD「好」
PM「這個廣告不明顯，我要改固定在這裡！」
RD「這樣固定住的東西有點太多了吧？」
PM「商業邏輯最重要！」
RD「喔...」
Designer「誒這怎麼卡在這邊～這樣離這個太近了不太對！」
RD「可是這個要改的話...」
Designer「過去一點點就好拜託～4px！然後另一個這樣也太近，往上8px，謝謝！」
行銷「我們要推一個短期活動需要固定版位來主打他喔！」
PM「好！沒問題！」
------
RD「安西教練我想打人。」inherit
這個是繼承父層的設定值！老實說我不常用…
但為了這篇文…還是做了個範例！
如果有人曾經活用過這個的話歡迎留言跟我說喔～～
z-index
這是只要講到position就一定會提及的屬性！
他是用來決定元素 Z軸先後順序 的， 數字越大，越往前排 ，當切版時使用了絕對訂位position:fixed或相對定位position:relative與position:absolute時，勢必會有因層級關係導致非自己理想的Z軸排序，這時候就一定會用到z-index！
不懂Z軸？可以看看下圖～
還是看不懂？…用Adobe photoshop的圖層概念來解釋就是 數字越大的就往上面放 ！
蛤你是PM？…搭過飛機沒？從空中看臺灣市容～最上面那層醜醜的鐵皮，就是z-index數字最大！！這樣懂沒？
還是不懂？底下發問我教你！
下一篇再繼續介紹一些當初切版時很難抉擇該怎麼做的易混淆語法！
希望大家看了這小系列之後，能夠更體諒工程師們的難處～不要逼人家打球變打人（？）喔～
