如何理解CSS布局中的Position

今天就跟大家聊聊有關(guān)如何理解CSS布局中的Position，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

當(dāng)人們將接觸CSS布局的時候傾向于使用Position。Positoin似乎是一個很容易掌握的概念。從表面上來看，你只要精確指定了一個塊所處的位置，它就會坐落在那里。然而定位比你剛接觸時要更復(fù)雜一些。這里有幾件事會絆倒一個新手，所以在熟練使用之前需要掌握它們。

一旦你深入地理解了Position的工作原理，你就可以使用它做出很棒的事來

盒模型和Position類型

為了理解定位你首先的理解盒模型。前面一個鏈接是我之前寫給InstantShift關(guān)于盒模型的一篇文章。我在那里做了詳細(xì)的介紹，在這里我將提供一個快速的總結(jié)。

在CSS中，每個元素都被一本矩形框所包圍，每個元素都定了內(nèi)容區(qū)，內(nèi)容區(qū)被內(nèi)邊距（填充）包圍，邊框包圍了內(nèi)容區(qū)和內(nèi)邊距。外邊距在邊框外面用來和其他盒子分隔開來。你可以在下面這張圖中看到這些

 

定位 模式定義了一個盒子在整體布局中將會放置在哪里、每個盒子怎樣影響在它周圍的盒子。定位模式包含了正常文檔流，浮動流和幾種類型的定位元素

CSS定位屬性有五個可取值

position: absolute
position: relative
position: fixed
position: static
position: inherit

下面我將對前三個屬性進(jìn)行詳細(xì)地講解，對后面兩個屬性只是作簡單的介紹

static是position默認(rèn)的值。每個position屬性被設(shè)置為static的元素將在正常文檔流中顯示。它們被放置和顯示的規(guī)格在盒模型中定義。

一個static定位的元素將會忽略任何top, right, bottom, left, z-index屬性的值。為了使用其中任何一個值，你必須將元素的position屬性設(shè)置為absolute, relative, fixed之一

inherit和其他所有css屬性一樣，當(dāng)前元素取得和父級元素相同的屬性值。

絕對定位(Absolute Positioning)

絕對定位的元素完全從正常文檔流中除去。對于包圍它的其他元素而言，它們認(rèn)為絕對定位的元素不存在，就好像將元素的display屬性設(shè)置為none。假如你想保留它所占有的位置而不被其他元素所填充，那么你需要使用其他的定位方式。

你在設(shè)置一個絕對定位元素的位置時，top, right, bottom, left四個屬性，你通常只定義其中的兩個，top或者left，以及l(fā)eft或者right。它們的默認(rèn)值都是auto

理解絕對定位的關(guān)鍵是理解它們從哪里開始。假如top值為20px，問題是20px是從哪里開始的。

一個絕對定位元素的起點位置是相對于它第一個postion屬性值不為static的父級元素而言的。假如在父級元素鏈中沒有滿足條件的，絕對定位元素就是相對于整個文檔窗口來定位的。哈

關(guān)于”相對“這個概念你或許有點疑惑，特別是還有個我們還沒有談到的”相對定位”的東西。

當(dāng)你為一個元素設(shè)置position:absolute，css將會看這個元素的父元素，如果父元素被定位過（除了static），那么絕對定位元素的起點是父元素的左上角位置。

假如父元素沒有被應(yīng)用除static以外的positon定位，那么就檢查父元素的父元素有沒有應(yīng)用除static以外的position定位。假如有，絕對定位元素的起點就是這個元素的左上角位置。假如沒有，繼續(xù)在DOM樹上查找，知道找到一個應(yīng)用除static以外的定位元素，或者查找失敗，到達(dá)最外層的瀏覽器窗口。

相對定位（Relative Positoning）

相對定位也是根據(jù)top, right, bottom, left屬性來定位。但是只是相對于它們原來的位置進(jìn)行移動。這意味著，添加相對定位和添加外邊距有些相似。但也有一個重要的不同之處，圍繞在相對定位元素附近的元素會忽略相對定位元素的偏移

我們可以把它看做是一張圖片的重像從真實的圖片位置開始進(jìn)行一點移動。它原始圖片所占據(jù)的位置仍然保留，但我們已經(jīng)沒法再看到它，只能看到它的重像。這樣就讓元素之間可以進(jìn)行位置的重疊，因為相對于定位元素能夠移動到其他元素所占據(jù)的空間中。

相對定位元素從正常文檔流中脫離，但是它仍然影響著圍繞著它的元素。圍繞著它的元素表現(xiàn)的好想相對定位元素仍在處在正常流中一樣。

我們不需要在這里詢問相對誰進(jìn)行定位。答案是，始終是相對于正常文檔流。相對定位好像為元素添加外邊距（margin），但是對相鄰的元素而言好想什么也沒有發(fā)生。實際上沒有添加外邊距。

固定定位（Fixed Positioning）

固定定位和絕對定位有些相像，但是也有一些不同

首先，固定定位始終相對于瀏覽器窗口進(jìn)行定位，然先取得top, right, bottom, left,屬性值來進(jìn)行定位。它脫離了它的父級元素，它定位元素中它表現(xiàn)得有點反叛。

第二個不同點是在名字上繼承的。固定元素始終時固定的。當(dāng)頁面固定時他們不會移動。你告訴它該在哪里固定，它就始終在那里。這樣，他們看起來似乎又不是那么反叛。

在某種意義上，固定定位元素有點像固定定位的背景圖片，只不過它的外層容器始終時瀏覽器窗口罷了。如果你在body中設(shè)置一個背景圖片，那么它與一個固定定位元素的行為非常相像。只不過在位置的位置不是那么精確。

背景圖片也不會改變其在第三維度的位置，也因此帶來了z-index屬性

z-index，打破平面

一個頁面是二位平面，它有寬和高。我們活在一個用z-index作為其深度的三維世界中，這個額外的維度能夠穿越一個平面。

高z-index值在低z-index值元素上面，并從頁面的上方運動。相反地，低z-index值在高z-index值元素下面，并從頁面下方運動。

沒有z-index，定位元素有點兒麻煩。應(yīng)用了z-index，你可以做出一些創(chuàng)造性的東西出來，允許一個元素在另一個元素的上方或下方。每個元素的z-index屬性默認(rèn)值是0， 并且可以使用負(fù)值。

事實上，z-index比我這里敘述的要復(fù)雜得多，但細(xì)節(jié)寫在了另外一篇文章里?，F(xiàn)在請記住這個額外維度的基本概念，以及他們的堆疊順序。并且只有定位元素才可以使用z-index屬性

定位問題（Positioning Issues）

這里有一些常見的定位元素常見的問題，每個問題都值得了解。

1.你不能對一個元素同時使用position屬性和float屬性。因為對使用什么樣的定位方案來說兩者的指令是相對沖突的。如果你把兩個屬性都添加到同一個元素上，那么就期望在CSS中較后的那個屬性是你想要使用的吧。

2.Margin不會在絕對定位元素上折疊。假如你有一個底外邊距是20px的段落，在這個段落下面正好是一張有30px上外邊距圖片，段落和圖片之間的空白將會是50px（20px+30px），而不是30px(30px > 20px)。這就是眾所周知的外邊距折疊，兩個外邊距合并（折疊）成一個。絕對定位元素不會像那樣進(jìn)行margin的折疊，這會使他們跟預(yù)期的不一樣。

3.IE在z-index有些bug。在IE6中，選中元素總是在堆疊元素是上方，而不管它的z-index以及其他圍繞在它周圍的元素的z-index值是多少。

IE6和IE7在堆疊層上還有其他的問題。IE6由最外層的定位元素的層級來決定哪一組的元素處于層級的最上面，而不是每一個單獨的元素自身的層級決定。

代碼如下:

<div >
<p ></p>
</div>
<img  />

你覺得段落會在堆疊成的最上面，因為它有最大的z-index值，但是在IE6和IE7中，圖片將會在段落上面，因為看起來有兩個不同的堆疊層。一個是div的，一個是image的。image比div有更高的z-index，因此它會覆蓋在div中的任何東西

總結(jié)

對一個元素應(yīng)用定位屬性，元素的表現(xiàn)將取決于CSS的定位模式。你可以對一個定位元素使用absolute, relative, fixed, static(default)和inherit值。

定位模式，包括CSS定位元素，定義了一個盒子在布局中放在哪里，并且緊挨著它的元素是怎樣受定位元素影響的。

z-index可應(yīng)用于定位元素。它向頁面添加了第三維度，并且定義了元素堆疊的順序。

定位屬性看起來很容易掌握，但是它工作起來和它在表面時所看到的不一樣。你可能會覺得相對定位更像絕對定位。你通常想在布局是使用浮動，而對一個特殊的元素使用定位，以打破頁面布局。

看完上述內(nèi)容，你們對如何理解CSS布局中的Position有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。