如何理解CSS編程中的定位

這篇文章主要介紹“如何理解CSS編程中的定位”，在日常操作中，相信很多人在如何理解CSS編程中的定位問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何理解CSS編程中的定位”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

　　CSS盒模型和定位的類型

　　為了搞清楚定位首先你得了解CSS盒模型。在上一句中的鏈接是我寫(xiě)在InstantShift 中的一篇關(guān)于盒模型的文章。我在那篇文章做了詳細(xì)的講解并會(huì)在這篇文章中做一個(gè)快速的總結(jié)。

　　在CSS中，每一個(gè)元素都由一個(gè)矩形盒子所包含。每一個(gè)盒子都會(huì)具有一個(gè)內(nèi)容區(qū)，內(nèi)容區(qū)被一個(gè)內(nèi)邊距所包裹，內(nèi)邊距外是盒子的邊框，并且在邊框之外會(huì)有一個(gè)外邊距用于與其他盒子分隔開(kāi)來(lái)。這些你可以從下面這張圖片看到。

　定位模式規(guī)定了一個(gè)盒子在總體的布局上應(yīng)該處于什么位置以及對(duì)周圍的盒子會(huì)有什么影響。定位模式包括了常規(guī)文檔流，浮動(dòng)，和幾種類型的 position 定位的元素。

　　CSS position 屬性可以取5種值：

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

　　我會(huì)在下面對(duì)前三個(gè)值進(jìn)行詳細(xì)的闡述并簡(jiǎn)單地講解一下最后兩個(gè)值。

　　static 是 position 默認(rèn)的屬性值。任何應(yīng)用了 position:static 的元素都處于常規(guī)文檔流中。它處于什么位置以及它如何影響周邊的元素都是由盒模型所決定的。

　　一個(gè) static 定位的元素會(huì)忽略所有 top，right，bottom，left 以及 z-index 屬性所聲明的值。為了讓你的元素能使用任何的這些屬性，你需要先為它的 position 屬性應(yīng)用這三個(gè)值的其中之一： absolute，relative，fixed

　　position 值為 inherit 的元素和其他所有屬性的繼承值一樣，元素只是簡(jiǎn)單地應(yīng)用了與父元素一樣的 position 值。
　　絕對(duì)定位（Absolute Positioning）

　　絕對(duì)定位的元素會(huì)完全地從常規(guī)文檔流中脫離。對(duì)于包圍它的元素而言，它會(huì)將該絕對(duì)定位元素視為不存在。就好像 display 屬性被設(shè)為 none 一樣。如果你想要保持它所占有的位置而不被其他元素所填充，那么你需要使用其他的定位方式。

　　你可以通過(guò) top, right, bottom, 和 left 四個(gè)屬性來(lái)設(shè)置絕對(duì)定位元素的位置。但你通常只會(huì)設(shè)置它們其中的兩個(gè)，top 或者 bottom，以及 left 或者 right。默認(rèn)地它們的值都為 auto。

　　弄明白絕對(duì)定位的關(guān)鍵是知道它的起點(diǎn)在哪里。如果 top 被設(shè)置為20px那么你要知道這20px是從哪里開(kāi)始計(jì)算的。

　　一個(gè)絕對(duì)定位的元素的起點(diǎn)位置是相對(duì)于它的第一個(gè) position 值不為 static 的父元素而言的。如果在它的父元素鏈上沒(méi)有滿足條件的父元素，那么絕對(duì)定位元素則會(huì)相對(duì)于文檔窗口來(lái)進(jìn)行定位。哈！

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

　　當(dāng)你在一個(gè)元素的樣式上設(shè)置 position:absolute 意味著需要考慮父元素，并且如果父元素的 position 值不為 static ，那么絕對(duì)定位元素的起點(diǎn)為父元素的左上角位置。

　　如果父元素沒(méi)有應(yīng)用除了 static 以外的 position 定位，那么它會(huì)檢查父元素的父元素是否有應(yīng)用非 static 定位。如果該元素應(yīng)用了定位，那么它的左上角便會(huì)成為絕對(duì)元素的起點(diǎn)位置。如果沒(méi)有則會(huì)繼續(xù)向上遍歷DOM直到找到一個(gè)定位元素或者尋找失敗以到達(dá)最外層的瀏覽器窗口。
　　相對(duì)定位（Relative Positioning）

　　相對(duì)定位的元素也是根據(jù) top, right, bottom, 和 left 四個(gè)屬性來(lái)決定自己的位置的。但只是相對(duì)于它們?cè)瓉?lái)所處于的位置進(jìn)行移動(dòng)。在某種意義上來(lái)說(shuō)，為元素設(shè)置相對(duì)定位和為元素添加 margin 有點(diǎn)相似，但也有一個(gè)重要的區(qū)別。區(qū)別就是在圍繞在相對(duì)定位元素附近的元素會(huì)忽略相對(duì)定位元素的移動(dòng)。

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

　　相對(duì)定位元素離開(kāi)了正常文檔流，但仍然影響著圍繞著它的元素。那些元素表現(xiàn)地就好像這個(gè)相對(duì)定位元素仍然在正常文檔流當(dāng)中。

　　我們無(wú)需再追問(wèn)這個(gè)相對(duì)的位置是在哪里。因?yàn)檫@個(gè)相對(duì)位置很顯然是正常的文檔流。相對(duì)定位有點(diǎn)兒像為元素添加了 margin ，對(duì)相鄰元素來(lái)說(shuō)卻像是什么都沒(méi)發(fā)生過(guò)。但實(shí)際上并沒(méi)有增加任何的 margin 。
　　固定定位（Fixed Positioning）

　　固定定位的行為類似于絕對(duì)定位，但也有一些不同的地方。

　　首先，固定定位總是相對(duì)于瀏覽器窗口來(lái)進(jìn)行定位的，并且通過(guò)哪些屬性的 top, right, bottom, 和 left 屬性來(lái)決定其位置。它拋棄了它的父元素，它就是定位中表現(xiàn)地有點(diǎn)兒反叛。

　　第二個(gè)不同點(diǎn)是其在名字上是繼承的。固定定位的元素是固定的。它們并不隨著頁(yè)面的滾動(dòng)而移動(dòng)。你可以告訴元素它所處的位置并永遠(yuǎn)不再移動(dòng)。噢~好像還挺乖巧的。

　　在某種意義上說(shuō)固定定位元素有點(diǎn)兒類似固定的背景圖片，只不過(guò)它的外層容器塊總是瀏覽器窗口罷了。如果你在 body 中設(shè)置一個(gè)背景圖片那么它與一個(gè)固定定位的元素的行為時(shí)非常像的，只不過(guò)在位置上的精度會(huì)略少一些。

　　背景圖片也不能改變其在第三個(gè)維度的大小，也因而帶來(lái)了 z-index 屬性。
　　打破了平面的 Z-Index

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

由上圖可知，高的 z-index 位于低的 z-index 的上面并朝頁(yè)面的上方運(yùn)動(dòng)。相反地，一個(gè)低的 z-index 在高的 z-index 的下面并朝頁(yè)面下方運(yùn)動(dòng)。

　　沒(méi)有的 z-index 的話，定位元素會(huì)有點(diǎn)兒麻煩。因?yàn)?z-index 能讓一個(gè)定位元素位于另一個(gè)元素的上方或者下方，這或許能讓你做出點(diǎn)創(chuàng)造性的東西。所有的元素的默認(rèn)的 z-index 值都為0，并且我們可以對(duì) z-index 使用負(fù)值。

　　z-index 實(shí)際上比我在這里描述的要更加地復(fù)雜，但細(xì)節(jié)寫(xiě)在了另一篇文章里。現(xiàn)在只需要記住這個(gè)額外維度的基本概念以及它的堆疊順序，另外還要記住只有定位元素才能應(yīng)用 z-index屬性。
　　定位的問(wèn)題

　　對(duì)于定位元素來(lái)說(shuō)由幾個(gè)比較常見(jiàn)的問(wèn)題，都值得我們好好了解。

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

　　2.Margin 不會(huì)在絕對(duì)元素上折疊。假設(shè)你具有一個(gè) margin-bottom 為20px的段落。在段落后面是一個(gè)具有30px的 margin-top 的圖片。那么段落和圖片之間的空間不會(huì)是50px（20px+30px）而是30px（30px > 20px）。這就是所謂的 margin-collapse，兩個(gè) margin 會(huì)合并（折疊）成一個(gè) margin。

　　絕對(duì)定位元素不會(huì)像那樣進(jìn)行 margin 的折疊。這會(huì)使它們跟預(yù)期的不一樣。

　　3.IE在 Z-index 上有一些BUG。在IE 6中 select 元素總是處于堆疊層級(jí)的最上方而不管它的 z-index 和其他元素的 z-index 是多少。

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <div <span style="width: auto; height: auto; float: none;" id="3_nwp"><a style="text-decoration: none;" mpid="3" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=50c074aa65c25dc2&k=style&k0=style&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c25dc265aa74c050&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F3070%2Ehtml&urlid=0" id="3_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">style</span></a></span>="z-index: ">  

2.    <p style="z-index: 1"></p>  

3. </div>  

4. <img style="z-index: " />  

　　對(duì)上面這段結(jié)構(gòu)，你會(huì)預(yù)料段落元素處于堆疊層級(jí)的最上方。因?yàn)樗哂凶畲蟮?z-index 值。但在IE 6和IE 7中，圖片為處于段落的上方。因?yàn)?img 具有比 div 更加高的 z-index 層級(jí)。因此它會(huì)位于所有 div 的子元素的上方。　　

到此，關(guān)于“如何理解CSS編程中的定位”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！