資訊專欄INFORMATION COLUMN
摘要：和不同，其他三個元素的位置重新排列了。只要元素會脫離文檔結(jié)構(gòu)，它就會產(chǎn)生破壞性，導(dǎo)致父元素坍塌。的絕對定位元素的定位永遠是相對于瀏覽器邊界的，和其他元素沒有關(guān)系。
1.引言
在學(xué)習(xí)position之前，我們應(yīng)該去思考一個問題：什么情況下我們需要定位？如果沒有定位將無法滿足我們怎樣的需求？我們要知道，被人類創(chuàng)造出來的每一個知識，都有它的用途，都要解決一些之前遇到的問題。
如果沒有定位，我們做出來的網(wǎng)頁將會是按部就班的自上而下、自左而右的平鋪在瀏覽器上，外加通過margin和padding調(diào)整一下間距，還有就是通過float來浮動某些元素。做一些簡單的網(wǎng)頁這樣就夠了，例如N年之前的yahoo，雖然現(xiàn)在看來很low。
但是有些情況下，這種按部就班的網(wǎng)頁排版滿足不了我們的要求，我們需要某些元素跑出來，懸浮在網(wǎng)頁上面，而且需要給它指定一個位置。這時候我們就需要用到了position，而且是非用不可。如下圖：
position一共有五個可選屬性：static / relative / absolute / fixed / inherit。其中static（靜態(tài)定位）是默認值，即所有的元素如果不設(shè)置其他的position值，它的position值就是static，有它跟沒有它一樣，而inherit是從父元素繼承position屬性的值。就不多介紹了。
2.relative 相對定位相對定位relative可以用一個例子很輕松的演示出來。例如我們寫4個
，背景色為灰，出來的樣子大家不用看也能知道。
html
css
js
jq
然后我們在第三個
上面，加上position:relative并且設(shè)置left和top值，看這個
有什么變化。
html
css
js
jq
上圖中，大家應(yīng)該要識別出兩個信息（相信大部分人會忽略第二個信息）
第三個
發(fā)生了位置變化，分別向右向下移動了10px；
其他的三個
位置沒有發(fā)生變化，這一點也很重要。
因此，relative會導(dǎo)致自身位置的相對變化，而不會影響其他元素的位置、大小的變化。這是relative的要點之一。還有第二個要點，就是relative產(chǎn)生一個新的定位上下文，下文有關(guān)于定位上下文的詳細介紹，這里可以先通過一個例子來展示一下區(qū)別：
注意看這兩圖的區(qū)別，下文將有解釋。
3.absolute 絕對定位（相對于“定位上下文”）說到absolute，推薦大家去看一個視頻教程，講師張鑫旭對absolute講的非常透徹，本文的一些內(nèi)容也是參考了這篇教程，好東西大家一起分享！
先寫一個基本的頁面——4個
html
css
jsjsjsjsjs
jq
然后，我們把第三個
改為absolute，看看會發(fā)生什么變化。
html
css
js
jq
從上面的結(jié)果中，我們能看出幾點信息：
absolute元素脫離了文檔結(jié)構(gòu)。和relative不同，其他三個元素的位置重新排列了。只要元素會脫離文檔結(jié)構(gòu)，它就會產(chǎn)生破壞性，導(dǎo)致父元素坍塌。（此時你應(yīng)該能立刻想起來，float元素也會脫離文檔結(jié)構(gòu)）
absolute元素具有“包裹性”。之前
的寬度是撐滿整個屏幕的，而此時
的寬度剛好是內(nèi)容的寬度。
absolute元素具有“呆滯性”（不讓它動，它就不動）。雖然absolute元素脫離了文檔結(jié)構(gòu)，但是它的位置并沒有發(fā)生變化，還是老老實實的呆在它原本的位置，因為我們此時沒有設(shè)置top、left的值。
absolute元素會懸浮在頁面上方，會遮擋住下方的頁面內(nèi)容。
最后，通過給absolute元素設(shè)置top、left值，可自定義其位置，這個都是平時比較常用的了。這里需要注意的是，設(shè)置了top、left值時，元素是相對于最近的定位上下文來定位的，而不是相對于瀏覽器定位。下文馬上會講定位上下文。
最后，再提幾個小知識點。
設(shè)置absolute會使得inline元素被“塊”化，這在上一節(jié)講display時已經(jīng)說過；
設(shè)置absolute會使得元素已有的float失效。不過float和absolute同時使用的情況不多；
上文提到了absolute會使元素懸浮在頁面之上，如果有多個懸浮元素，層級如何確定？答案是“后來者居上”。
4.fixed 絕對定位（相對于“瀏覽器”）其實fixed和absolute是一樣的，唯一的區(qū)別在于：absolute元素是根據(jù)最近的定位上下文確定位置，而fixed永遠根據(jù)瀏覽器確定位置。
上文很多次提到了“定位上下文”，那么它到底是一個什么東東？答案馬上揭曉。
5.定位上下文 5.1 relative的相對定位relative元素的定位永遠是相對于元素自身位置的，和其他元素沒關(guān)系，也不會影響其他元素。
5.2 fixed的絕對定位fixed元素的定位永遠是相對于瀏覽器邊界的，和其他元素沒有關(guān)系。但是它具有破壞性，會導(dǎo)致其他元素位置的變化。
5.3 absolute的絕對定位如果為absolute設(shè)置了top、left，瀏覽器會根據(jù)什么去確定它的縱向和橫向的偏移量呢？
答案是瀏覽器會遞歸查找該元素的所有父元素，如果找到一個設(shè)置了position:relative/absolute/fixed的元素，就以該元素為基準定位，如果沒找到，就以瀏覽器邊界定位。如下兩個圖所示：
可見，定位上下文就是absolute用來定位的“某一層祖先元素”。
此時，再看前面提到的那個圖，應(yīng)該就能理解了：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112108.html
摘要：本系列文章重拾主要參考王福朋知多少，結(jié)合自己的理解和學(xué)習(xí)需要，修改或添加了一些內(nèi)容，難免有失偏頗，僅供自我學(xué)習(xí)參考之用。 工作中或多或少的寫一些css，但總感覺掌握的不夠扎實，時而需要查閱一下知識點。我想，一方面跟缺少科班出身式的系統(tǒng)學(xué)習(xí)有關(guān)，另一方面也苦于一直未尋覓到一套合我胃口教程。直到我讀到了王福朋css知多少系列文章，使我有了重新系統(tǒng)學(xué)習(xí)css的想法。 本系列文章（重拾css）...
摘要：瀏覽器默認樣式中規(guī)定了元素哪些屬于塊剩下的就是流。上圖可知，針對的標簽，你設(shè)置寬度和高度是無效的，通過監(jiān)控可以知道，該元素實際的寬度和高度都是，并不是我們設(shè)定的值。因此，的特點可以總結(jié)為外部看來是流，但是自身卻是一個塊。 1.引言 html元素，除了塊就是流（即平時常說的塊級元素和行內(nèi)元素），而且流都包含在塊中，例如body就是一個塊，而a就是一個流。瀏覽器默認樣式中規(guī)定了html元素...
摘要：也就是說我們操作的幾何公式中的未知變量，而具體的畫圖操作則由渲染引擎處理，而不是我們苦苦哀求設(shè)計師幫忙。 前言 ?當(dāng)CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)border-top-left/right-radius的水平半徑之和大于元素寬度時，實際值會按比...
摘要：本系列將稍微深入探討一下那個貌似沒什么好玩的魔法堂重拾之解構(gòu)魔法堂重拾之圖片作邊框魔法堂重拾之不僅僅是圓角魔法堂重拾之更廣闊的遐想解構(gòu)說起我們自然會想起，而由條緊緊包裹著的邊組成，所以的最小操作單元是。 前言 ?當(dāng)CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)...
摘要：如果我們以為重點看，從上圖中我們可以總結(jié)出學(xué)習(xí)的三個突破點。這次我們向瀏覽器這位機器人學(xué)習(xí)一下，看看它寫出來的能給我們什么幫助。對選擇器來說，有一個很重要的話題級別。布局布局是的重頭戲，每個系統(tǒng)的布局都有其各自的特點。 眾所周知，css的運行環(huán)境是瀏覽器，那么我們有必要先來認識下瀏覽器。 1.瀏覽器是怎樣工作的 有篇文章叫《瀏覽器的工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘》，文中言簡意賅的介紹...
閱讀 2335·2021-11-24 09:39
閱讀 3778·2021-11-19 09:40
閱讀 2153·2021-09-27 13:36
閱讀 1897·2019-08-30 15:44
閱讀 390·2019-08-30 13:52
閱讀 2713·2019-08-30 11:13
閱讀 2171·2019-08-29 16:18
閱讀 1755·2019-08-29 15:43
