資訊專欄INFORMATION COLUMN
摘要：而造成這樣的原因就是屬性遵循常規(guī)流，并沒(méi)有脫離文檔流，所以和是會(huì)影響前后元素的位置的。
CSS 參考手冊(cè)對(duì) position 屬性做了說(shuō)明：
static： 對(duì)象遵循常規(guī)流。此時(shí)4個(gè)定位偏移屬性不會(huì)被應(yīng)用。
relative：對(duì)象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過(guò)top，right，bottom，left這4個(gè)定位偏移屬性進(jìn)行偏移時(shí)不會(huì)影響常規(guī)流中的任何元素。
absolute： 對(duì)象脫離常規(guī)流，此時(shí)偏移屬性參照的是離自身最近的定位祖先元素，如果沒(méi)有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊。
fixed： 與absolute一致，但偏移定位是以窗口為參考。當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。
針對(duì)上面的說(shuō)明，咱們下面通過(guò)幾個(gè)例子加以解釋，不過(guò)你的首先理解 常規(guī)流 是什么？ 常規(guī)流也被叫做 文檔流 ， 常規(guī)流 指的是元素按照其在 HTML 中的位置順序決定排布的過(guò)程，主要的形式是自上而下，一行接一行，每一行從左至右。就像搭積木一樣，一成一成，積木從下往上（常規(guī)流從上往下）， 那 脫離常規(guī)流 也就好理解了，就是 積木塊 不占據(jù)原來(lái)的位置了。
下面例子的 html 布局：
默認(rèn) css 樣式：
.div{
border: 2px solid darkgrey;
width:400px;
height: 400px;
margin-top: 50px;
}
div{
width: 100px;
height: 100px;
border: 1px solid darkgreen;
}
靜態(tài)定位(static) ：
static，無(wú)特殊定位，它是html元素默認(rèn)的定位方式，4個(gè)定位偏移屬性不會(huì)被應(yīng)用。及對(duì)它設(shè)置 top，right，bottom，left 無(wú)效。
相對(duì)定位(relative) ：
relative 屬性遵循常規(guī)流,也就設(shè)置 relative 屬性不會(huì)使它脫離文檔流。
如給第一個(gè)盒子 添加 relative ：
.d1{
border: 1px solid red;
position: relative;
top: 20px;
left: 20px;
}
可以看出下面的盒子還在原來(lái)的位置，而第一個(gè)盒子也占據(jù)這原來(lái)的位置(虛線的地方),并且 top 和 left 定位是相對(duì)于 父容器的。
好了知道了這一效果，那咱們?cè)诮o第一個(gè)盒子加上 margin / padding ，會(huì)有什么變化呢？
.d1{
border: 1px solid red;
position: relative;
margin:10px;
padding: 10px;
top: 20px;
left: 20px;
}
可以看出 ，第一個(gè)盒子在添加 margin 屬性后 ，盒子偏離了父容器 10px ，加上之前的 top，就是 30px， 而 padding 屬性會(huì)使 盒子 撐開了 10px ，下面的其他盒子 d2、d3的位置也受到了影響，往下偏移了 40px ??！為什么是40px 呢，可以看圖中藍(lán)色實(shí)線部分，假設(shè)盒子 d1 沒(méi)有 relative 的話 ，那么 當(dāng) margin:10px; padding: 10px; 后，整個(gè)盒子是不是呈現(xiàn) 藍(lán)色實(shí)線的狀態(tài)， margin 會(huì)使 d1盒子 上下增加 10px，padding 會(huì)使 d1 盒子內(nèi)容上下?lián)伍_10px，合計(jì) d1盒子偏離了40px。
而造成這樣的原因就是 relative 屬性遵循常規(guī)流，并沒(méi)有脫離文檔流，所以 margin和padding 是會(huì)影響
前后元素的位置的。
絕對(duì)定位(absoulte) ：
absolute： 對(duì)象脫離常規(guī)流。
給盒子添加 屬性：
.d1{
border: 1px solid red;
position: absolute;
top: 20px;
left: 20px;
}
嗯？ d1盒子怎么跑到了父容器的外面，而且 d2、d3 盒子的位置也受到了影響，往上移動(dòng)了一個(gè)d1的高度。
原來(lái)我沒(méi)有給父容器添加一個(gè) position:屬性 ，這也引出了 absolute 的一個(gè)規(guī)則：
使用absoult定位的元素脫離文檔流后，就只能根據(jù)祖先類元素(父類以上)進(jìn)行定位，而這個(gè)祖先類還必須是以postion非static方式定位的，
舉個(gè)例子，a元素使用absoulte定位，它會(huì)從父類開始找起，尋找以position非static方式定位的祖先類元素(注意，一定要是直系祖先才算），直到標(biāo)簽為止。
所以這樣：
.div{
border: 2px solid darkgrey;
width:400px;
height: 400px;
margin-top: 50px;
position: relative;
}
.d1{
border: 1px solid red;
position: absolute;
top: 20px;
left: 20px;
}
這就是 盒子脫離文檔流的現(xiàn)象，脫離了文檔流，那么就不再占據(jù)原來(lái)的位置了，后面的元素就會(huì)頂上去，補(bǔ)充空白位置！
那同樣的 ，當(dāng)盒子添加 absolute 屬性，再添加 margin / padding ，會(huì)有什么變化呢？
.d1{
border: 1px solid red;
position: absolute;
margin: 10px;
padding: 10px;
top: 20px;
left: 20px;
}
可以看出 首先 d2、d3 盒子 是不受影響的，而 d1盒子 margin: 10px;距離父容器就偏離了10px，加上之前的 top 和 left 就是 30px，而 padding 會(huì)把 d1 盒子給撐開了 10px。
但都對(duì)下面的盒子沒(méi)影響，原因也就是 absolute： 對(duì)象脫離常規(guī)流。
固定定位(fixed)：
fixed：與absolute一致，但偏移定位是以窗口為參考。當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。
所以：
.d1{
border: 1px solid red;
position: fixed;
top: 20px;
left: 20px;
}
top 和 left 是以窗口為參考的!。當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。還在原來(lái)的位置。
最后一點(diǎn)需要注意： 使用absoulte或fixed定位的話，必須指定 left、right、 top、 bottom
屬性中的至少一個(gè)，否則left/right/top/bottom屬性會(huì)使用它們的默認(rèn)值 auto，也就是相當(dāng)于 relative 狀態(tài)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50011.html
摘要：下文稱位置屬性即為。注意，不會(huì)脫離文檔流，具體見下面的圖示。直譯為修正，簡(jiǎn)單粗暴，直接相對(duì)瀏覽器窗口顯示區(qū)域定位。 Position定位 個(gè)人覺得position這個(gè)屬性真的算是CSS的見面殺了。尤其是absolute，當(dāng)年可是被虐的不輕。當(dāng)然了，現(xiàn)在愛上了這個(gè)屬性，誰(shuí)用誰(shuí)知道。 position屬性 position是CSS的一個(gè)屬性，地位較高，也是我們重點(diǎn)要說(shuō)的一個(gè)屬性。 對(duì)應(yīng)了四...
摘要：下文稱位置屬性即為。注意，不會(huì)脫離文檔流，具體見下面的圖示。直譯為修正，簡(jiǎn)單粗暴，直接相對(duì)瀏覽器窗口顯示區(qū)域定位。 Position定位 個(gè)人覺得position這個(gè)屬性真的算是CSS的見面殺了。尤其是absolute，當(dāng)年可是被虐的不輕。當(dāng)然了，現(xiàn)在愛上了這個(gè)屬性，誰(shuí)用誰(shuí)知道。 position屬性 position是CSS的一個(gè)屬性，地位較高，也是我們重點(diǎn)要說(shuō)的一個(gè)屬性。 對(duì)應(yīng)了四...
摘要：元素的位置通過(guò)以及屬性進(jìn)行規(guī)定。生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。規(guī)定應(yīng)該從父元素繼承屬性的值。表示相對(duì)原先位置右邊進(jìn)行偏移，表示相對(duì)原先位置下邊進(jìn)行偏移。當(dāng)和同時(shí)存在，僅有效，當(dāng)和同時(shí)存在僅有效。 定義和用法 position屬性規(guī)定元素的定位類型。這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過(guò)絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類型。...
摘要：而造成這樣的原因就是屬性遵循常規(guī)流，并沒(méi)有脫離文檔流，所以和是會(huì)影響前后元素的位置的。 CSS 參考手冊(cè)對(duì) position 屬性做了說(shuō)明： static： 對(duì)象遵循常規(guī)流。此時(shí)4個(gè)定位偏移屬性不會(huì)被應(yīng)用。 relative：對(duì)象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過(guò)top，right，bottom，left這4個(gè)定位偏移屬性進(jìn)行偏移時(shí)不會(huì)影響常規(guī)流中的任何元素。 absol...
閱讀 2310·2021-11-16 11:51
閱讀 3514·2021-09-26 10:14
閱讀 1851·2021-09-22 15:58
閱讀 1107·2019-08-30 15:52
閱讀 2022·2019-08-30 15:43
閱讀 2623·2019-08-30 13:46
閱讀 916·2019-08-30 13:10
閱讀 1028·2019-08-29 18:32
