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

為道里等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及道里網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、道里網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

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

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

盒模型和Position類(lèi)型

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

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

 

定位 模式定義了一個(gè)盒子在整體布局中將會(huì)放置在哪里、每個(gè)盒子怎樣影響在它周?chē)暮凶印６ㄎ荒Ｊ桨苏Ｎ臋n流，浮動(dòng)流和幾種類(lèi)型的定位元素

CSS定位屬性有五個(gè)可取值

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

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

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

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

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

絕對(duì)定位(Absolute Positioning)

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

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

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

一個(gè)絕對(duì)定位元素的起點(diǎn)位置是相對(duì)于它第一個(gè)postion屬性值不為static的父級(jí)元素而言的。假如在父級(jí)元素鏈中沒(méi)有滿(mǎn)足條件的，絕對(duì)定位元素就是相對(duì)于整個(gè)文檔窗口來(lái)定位的。哈

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

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

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

相對(duì)定位（Relative Positoning）

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

我們可以把它看做是一張圖片的重像從真實(shí)的圖片位置開(kāi)始進(jìn)行一點(diǎn)移動(dòng)。它原始圖片所占據(jù)的位置仍然保留，但我們已經(jīng)沒(méi)法再看到它，只能看到它的重像。這樣就讓元素之間可以進(jìn)行位置的重疊，因?yàn)橄鄬?duì)于定位元素能夠移動(dòng)到其他元素所占據(jù)的空間中。

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

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

固定定位（Fixed Positioning）

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

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

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

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

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

z-index，打破平面

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

高z-index值在低z-index值元素上面，并從頁(yè)面的上方運(yùn)動(dòng)。相反地，低z-index值在高z-index值元素下面，并從頁(yè)面下方運(yùn)動(dòng)。

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

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

定位問(wèn)題（Positioning Issues）

這里有一些常見(jiàn)的定位元素常見(jiàn)的問(wèn)題，每個(gè)問(wèn)題都值得了解。

1.你不能對(duì)一個(gè)元素同時(shí)使用position屬性和float屬性。因?yàn)閷?duì)使用什么樣的定位方案來(lái)說(shuō)兩者的指令是相對(duì)沖突的。如果你把兩個(gè)屬性都添加到同一個(gè)元素上，那么就期望在CSS中較后的那個(gè)屬性是你想要使用的吧。

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

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

IE6和IE7在堆疊層上還有其他的問(wèn)題。IE6由最外層的定位元素的層級(jí)來(lái)決定哪一組的元素處于層級(jí)的最上面，而不是每一個(gè)單獨(dú)的元素自身的層級(jí)決定。

代碼如下:

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

你覺(jué)得段落會(huì)在堆疊成的最上面，因?yàn)樗休^大的z-index值，但是在IE6和IE7中，圖片將會(huì)在段落上面，因?yàn)榭雌饋?lái)有兩個(gè)不同的堆疊層。一個(gè)是div的，一個(gè)是image的。image比div有更高的z-index，因此它會(huì)覆蓋在div中的任何東西

總結(jié)

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

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

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

定位屬性看起來(lái)很容易掌握，但是它工作起來(lái)和它在表面時(shí)所看到的不一樣。你可能會(huì)覺(jué)得相對(duì)定位更像絕對(duì)定位。你通常想在布局是使用浮動(dòng)，而對(duì)一個(gè)特殊的元素使用定位，以打破頁(yè)面布局。

看完上述內(nèi)容，你們對(duì)如何理解CSS布局中的Position有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)頁(yè)標(biāo)題：如何理解CSS布局中的Position-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://aaarwkj.com/article28/cojicp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、建站公司、網(wǎng)站設(shè)計(jì)公司、App設(shè)計(jì)、微信小程序、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)