今天因為做一個效果的時候需要CSS的定位效果來實現，於是我就根據自己原來對CSS的瞭解，用absolute和relative擺弄了好一陣子，總是無法實現滿意的效果。不會，咋辦呢？搜吧。這年代，啥問題還是得靠搜尋引擎。網上一瞭解才發現自己原來對定位的瞭解有誤，調整了代碼，實現了想要的效果，便於以後學習，把經驗留在這，嘿嘿。
我想實現的效果很簡單，就是在一張圖片上加另一個圖片，說的有點亂，還是直接看好了。
相信看了圖，大家肯定覺得很眼熟，如果你對實現這種效果很熟悉，就不需要再看下去了哦。如果你感興趣的話， 就繼續往下看吧（不過你最好已經且有了簡單的CSS知識）~~
說白了，實現這個效果還是用了position屬性的relative和absolut，但是這兩個值經常會讓人產生“自以為是”的感覺。大家一定要注意，這裡的relative和absolute都是有一個參照物的。
在這之前，先來介紹一個概念“常規文檔流”，我們一般布局的元素“<h1>This is a header</h1><p>This is some text</p><p>And even more text</p>”都是按照其布局的次序一次排列。這就屬於常規文檔流。
“position:absolute”是以body元素的左上方為起始點或以距擁有postion:absolute的DIV最近的那個擁有postion屬性的父級DIV的左上方為起始點。通過left,top,right,bottom屬性來操作。並且該定位方法超出了常規文檔流，因此不會對其它元素產生影響（不會導致其它元素位置的改變、大小的改變
等）
“postion:relative”是以body元素作為參照物或以其父級DIV作為參照物（不是超始點）。通過left,top,right,bottom屬性來操作。
為了說明問題，我們舉幾個例子來看一下：
例子代碼<div id="div0" style="width:100px;height:100px;border:1px solid #aaa">普通的div1
<div id="div1" style="position:absolute;left:100px;top:100px;border:1px solid #ccc;width:100px;height:100px;">
這裡用了absoulte
</div>
</div>
<div id="div0" style="width:100px;height:100px;border:1px solid #aaa">普通的div2
<div id="div2" style="position:relative;left:100px;top:100px;border:1px solid #ccc;width:100px;height:100px;">
這裡用了relative
</div>
</div>
</body>
</html>
：
通過上面這個圖，我想大家應該看出什麼了吧？
普通的div屬於常規文檔流，因此它們兩個是按照次序布局的。而使用了absolute之後,因為超出了常規文檔流，所以並沒有對普通div1產生任何影響，而且是以瀏覽器左上方的起始點進行精確定位。
而用了relative之後，會發現它與absolute不一樣，它是以父級div作為參照對象，但不是以父級對象的起始點做為參考點。通過觀察大家應該可以看出普通div2的長度被拉長了，拉長的距離則恰好是“普通的div2”這幾個字的高度。這說明了什嗎？
這說明relative首先是被當作常規文檔流進行處理，也就是說先按照次序進行布局，應該出現在“普通的div2”的下方。
因此，由於使用了relative的那個div高度為100px,因此普通的div2被展開，這之後，使用了relative的那個div才按照absolute來處理。
如果大家搞明白了，就可以開始運用這個postion屬性的兩個值來實現相應的效果了。
要實現開頭的那個效果思路如下：
我們可以選有一個div來做圖片的容器（並且加上position屬性，我設定為relative因為這樣可以運用於常規文檔流中，且可以相對於視窗的大小而相對靜止），然後在該容器中添加一個div（設定position屬性為absolute,因為我們希望該層覆蓋在原圖片上方，如果選用relative則會先根據常規文檔流處理，雖然可以通過left、top、bottom、right屬性達到覆蓋效果，可是同樣會影響原div大小），然後調節top,bottom則可實現效果。
相應代碼如下：
效果代碼Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
