如何理解CSS布局中的Position

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

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

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

盒模型和Position類型

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

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

 

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

CSS定位屬性有五個可取值

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

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

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

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

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

絕對定位(Absolute Positioning)

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

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

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

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

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

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

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

相對定位（Relative Positoning）

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

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

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

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

固定定位（Fixed Positioning）

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

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

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

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

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

z-index，打破平面

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

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

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

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

定位問題（Positioning Issues）

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

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

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

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中的任何東西

總結

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

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

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

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

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