相對定位及簡單的陰影效果

日期：2013-11-27  來源：攀枝花惠康網絡公司

弄懂了膳縵沔這些，那么寫膳縵沔的暗影效不美觀就不盤問題了，也很好理解了。看下面這個例子：http://www.css88.com/demo/relative/relative1.html

實現暗影效不美觀體例有良多，一般復雜一點的外發光式的暗影都使用png作為布景圖片來實現暗影，今天做的這個斗勁簡單，暗影是純色的，所以可以直接使用布景顏色，圖片的位移一下就能使圖片發生暗影效不美觀。圖片的位移可以使用相對定位（position:relative）和top，left等值來實現，這里我們首先要理解相對定位的真正浸染。

今天做了近似下圖的一個暗影效不美觀：

父級元素相對定位（position:relative）一般被我們用來和子元素絕對定位（position:absolute）配合，使子元素定位。絕對定位將對象年夜文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對于其最接近的一個最有定位設置的父對象進行絕對定位。如不美觀不存在這樣的父對象，則依據 body 對象。而其層疊經由過程 z-index 屬性界說；

可是相對定位（position:relative）是對象不成層疊，但將依據 left ， right ， top ， bottom 等屬性在正常文檔流中偏移位置,這里可以確定相對定位沒有脫離文檔流。

那么相當定位是相對于什么定位呢？我感受我們可以這么理解：相對定位是相對于該元素自己的定位。有人說相對定位很”自私”,因為相對定位一個最年夜特點是：自己經由過程定位跑開了還占用著原本的位置，不會讓給他四周的諸如文本流之類的對象。相對定位也斗勁自力，做什么事它自己說了算，要定位的時辰，它是以自己自己地址位置偏移的（相對對象自己偏移）。再拿前邊作好比來解，那么此時西瓜似乎是有魔法的，如不美觀西瓜經由過程相對定位在水桶中偏移了你會看到一個現實糊口中不存在的現象：水中有一個處所水凹下去了，四周的水不能填補它，西瓜看起來在旁邊，如不美觀攪動一下桶中的水，阿誰凹的位置會發現改變（文本流對相對定位對象還存在影響），可是凹處到西瓜呈現的距離始終連結一致?？梢娢谋玖髋c它之間還會互相影響，因為對象并沒有真正脫離文本流，境傺有兩小我在統一層樓水平移動的過程中會有碰頭的機緣。

要深切理解這一點可以看一下來自網上的例子：http://www.css88.com/demo/relative/relative2.html