css絕對定位、相對定位

css絕對定位、相對定位

文檔流的概念

確切的說應該是文檔文檔流模型的機制，html的佈局機制就是用文檔流模型的，即塊元素（block）獨佔一行，內聯元素（inline），不獨佔一行。簡單來講就是將窗體自上而下分紅一行行， 並在每行中按從左至右的順序排放元素，即爲文檔流。
每一個非浮動塊級元素都獨佔一行， 浮動元素則按規定浮在行的一端。 若當前行容不下， 則另起新行再浮動。內聯元素也不會獨佔一行。 幾乎全部元素(包括塊級，內聯和列表元素）都可生成子行， 用於擺放子元素。有三種狀況將使得元素脫離文檔流而存在，分別是浮動，絕對定位， 固定定位。 可是在IE中浮動元素也存在於文檔流中浮動元素不佔任何正常文檔流空間，而浮動元素的定位仍是基於正常的文檔流，而後從文檔流中抽出並儘量遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出後，仍然在文檔流中的其餘元素將忽略該元素並填補他原先的空間。浮動概念讓人迷惑根源在於瀏覽器對理論的解讀形成的。只能說不少人以IE作標準，其實它不是。基於文檔流， 咱們能夠很容易理解如下的定位模式：
相對定位， 即相對於元素在文檔流中位置進行偏移。 但保留原佔位。
絕對定位， 即徹底脫離文檔流， 相對於position屬性非static值的最近父級元素進行偏移。
固定定位， 即徹底脫離文檔流， 相對於視區進行偏移。

如塊級元素(block)

<div>div1</div>
<div>div2</div>

那麼怎麼知道這不是由於沒有設置高和寬的樣式而出現的狀況呢，咱們設置寬高試一試

<div style=" width:100px; height:100px;">div1</div>
<div style=" width:100px; height:100px;">div2</div>

效果以下:跟咱們預想的同樣

又如內聯元素(inline)

<img src="dizhi" style=" height:100px; width:100px;"/>
<a href="http:">連接1</a>
<a href="http:">連接2</a>

效果以下：能夠看到內聯元素後跟內聯元素不會另起一行

咱們再試下inline 後加 block

<img src="dizhi" style=" height:100px; width:100px;"/>
<a href="http:">連接1</a>
<a href="http:">連接2</a>
<div style=" width:100px; height:100px;">div1</div>

效果以下：能夠看到div1（block）是另起一行獨佔的

相對定位 position:relative

故名思意，相對定位就應該是相對於一個東西來定位，而這個東西是什麼呢？其實這個東西不是什麼，就是元素本身自己，用left right top bottom進行定位後，元素會根據原來的位置進行移動，但因爲position:relative這個屬性並無脫離文檔流的，因此元素自己所佔的位置會保留。
下面來作個實驗，一看就知道什麼緣由了- -

<div style=" width:100px; height:100px; border:1px solid black; ">div1</div>
<div style=" width:100px; height:100px; border:1px solid black; ">div2</div>
<div style=" width:100px; height:100px; border:1px solid black; ">div3</div>

效果以下：這是沒有加入position:relative文檔流的默認排法

咱們給div2加position:relative 並用top:-20px;left:50px進行相對移動

<div style=" width:100px; height:100px;">div1</div>
<div style=" width:100px; height:100px; position:relative; top:-20px; left:50px;">div2</div>
<div style=" width:100px; height:100px;">div3</div>

效果以下：咱們能夠看到藍色邊框就是div2原來的位置，黑色邊框就是經過position:relative相對於原來的位置左移50px; 上移20px獲得的，並且咱們看以看到，div3並無由於div2的上移而上移了，緣由就是position:relative這個屬性是沒有脫離文檔流的，因此元素自己所佔的位置會保留。

絕對定位 position:absolute

好吧終於有點戲肉了，文檔流那複雜的玩意咱們先不理，所謂絕對定位，其實也要找個東西來相對來絕對的，而這個東西就是元素的第一個有position，且positon不能爲static的祖先元素，是否是有點拗口，換個說法吧，就是這個小鬼（element）的定位能夠是他的老爸，他的爺爺，他的太公….（祖先要素）中並且第一個是是有錢的（position:absolute）或者是當官的（position:relative），就是不能是個程序猿（position:static 或者沒有設position）的。並且值得注意的是position:absolute這個屬性是脫離文檔流的，因此從新定位後元素是不會佔着原來的位置的

<div style=" border:1px solid Red; padding:10px; width: 340px; height: 400px""> 紅色：太公 <div style="border:1px solid Green; padding:10px; width: 320px; height: 360px"">
        綠色：爺爺
            <div style="border:1px solid Yellow; padding:10px; width: 300px; height: 320px; ">
            黃色：老爸
                <div style="width: 100px; height: 100px;">
                    div1</div>
                <div style="width: 100px; height: 100px;">
                    div2</div>
                <div style="width: 100px; height: 100px;">
                    div3</div>
            </div>
        </div>
    </div>

效果以下：首先給div1 div2 div3三個祖先div 黃色的老爸， 綠色的爺爺， 紅色的太公，暫時對他們都不設position屬性

好吧，如今給老爸div設position:relative（喲！當官的）給div2設position:absolute;left:120px; top:100px;

<div style=" border:1px solid Red; padding:10px; width: 340px; height: 400px""> 紅色：太公 <div style="border:1px solid Green; padding:10px; width: 320px; height: 360px"">
        綠色：爺爺
            <div style="border:1px solid Yellow; padding:10px; width: 300px; height: 320px; position:relative;">
            黃色：老爸
                <div style="width: 100px; height: 100px;">
                    div1</div>
                <div style="width: 100px; height: 100px; position:absolute; left:120px; top:100px;">
                    div2</div>
                <div style="width: 100px; height: 100px;">
                    div3</div>
            </div>
        </div>
    </div>`

效果以下：能夠從藍色線看出，div2以黃色（ide的藍線和黃色混在一塊兒變色了）div爲參照距離老爸左邊120px 上邊100px並且有於position:absolute是脫離文檔流的因此div2原來的位置不能保留div3向上填充

咱們再用他爺爺來試試

<div style=" border:1px solid Red; padding:10px; width: 340px; height: 400px">
    紅色：太公
        <div style="border:1px solid Green; padding:10px; width: 320px; height: 360px; position:relative;">
        綠色：爺爺
            <div style="border:1px solid Yellow; padding:10px; width: 300px; height: 320px; ">
            黃色：老爸
                <div style="width: 100px; height: 100px;">
                    div1</div>
                <div style="width: 100px; height: 100px; position:absolute; left:120px; top:100px;">
                    div2</div>
                <div style="width: 100px; height: 100px;">
                    div3</div>
            </div>
        </div>
    </div>

效果以下：仍是div2仍是 position:absolute;left:120px;top:100px,能夠衝藍色線看出此次是以綠色爺爺爲參照物作絕對定位的，並且div2一樣脫離了文檔流