我想實現的效果很簡單，就是在一張上加另乙個，說的有點亂，還是直接看下圖好了。
(效果圖)
(原圖)
相信看了圖，大家肯定覺得很眼熟，如果你對實現這種效果很熟悉，就不需要再看下去了哦。如果你感興趣的話， 就繼續往下看吧（不過你最好已經且有了簡單的css知識）~~
說白了，實現這個效果還是用了position屬性的relative和absolut，但是這兩個值經常會讓人產生「自以為是」的感覺。大家一定要注意，這裡的relative和absolute都是有乙個參照物的。
在這之前，先來介紹乙個概念「常規文件流」，我們一般布局的元素「
this is some text
and even more text
」都是按照其布局的次序一次排列。這就屬於常規文件流。
「position:absolute」是以body元素的左上角為起始點或以距擁有postion:absolute的div最近的那個擁有postion屬性的父級div的左上角為起始點。通過left,top,right,bottom屬性來操作。並且該定位方法超出了常規文件流，因此不會對其它元素產生影響（不會導致其它元素位置的改變、大小的改變
等）「postion:relative」是以body元素作為參照物或以其父級div作為參照物（不是超始點）。通過left,top,right,bottom屬性來操作。
為了說明問題，我們舉幾個例子來看一下：
<
html
>
<
head
>
head
>
<
body
style
="margin:0px 0px"
>
<
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則可實現效果。
相應**如下：
片名div
>
div>
CSS定位 層疊效果和浮動 04
1 絕對定位 2 相對定位 相對定位的位置是相對於元素自身的正常初始位置而言的。因此，即使是內容完全一樣的相對定位 作用於初始位置不同的多個元素上也僅能保證位移的方向一致，並不能代表這些元素最終將出現在相同的位置上。3 層疊效果 在css中，除了定義在html元素在水平和垂直方向上的位置，還可以定義...
css 定位連線 css絕對定位
定位的四種模式 static,relative,absolute,fixed 定位的四個位置 left,right,top,bottom 定位屬性 position,有四種狀態值 1.static 靜態定位,按元素在文件流中的順序排列,這是預設值,四個位置無效 2.relative 相對定位,元素相...
CSS定位 浮動定位
css定位機制 浮動定位 float屬性 進行浮動定位 left，right clear屬性 清除浮動 left，right，both float屬性 1.概述 div實現橫向多列布局 float屬性 left 左浮動 right 右浮動 none 不浮動 下圖為 的實現 float屬性用途 在 混...