CSS 之 Position 屬性

jas0n 發布于2019-08-29 11:11 / 612人閱讀

摘要：而造成這樣的原因就是屬性遵循常規流，并沒有脫離文檔流，所以和是會影響前后元素的位置的。

CSS 參考手冊對 position 屬性做了說明：

static：對象遵循常規流。此時4個定位偏移屬性不會被應用。

relative：對象遵循常規流，并且參照自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。

absolute：對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin折疊。

fixed：與absolute一致，但偏移定位是以窗口為參考。當出現滾動條時，對象不會隨著滾動。

針對上面的說明，咱們下面通過幾個例子加以解釋，不過你的首先理解 常規流 是什么？ 常規流也被叫做 文檔流 ， 常規流 指的是元素按照其在 HTML 中的位置順序決定排布的過程，主要的形式是自上而下，一行接一行，每一行從左至右。就像搭積木一樣，一成一成，積木從下往上（常規流從上往下），那 脫離常規流 也就好理解了，就是積木塊不占據原來的位置了。

下面例子的 html 布局：

默認 css 樣式：

.div{
    border: 2px solid darkgrey;
    width:400px;
    height: 400px;
    margin-top: 50px;
}
div{
    width: 100px;
    height: 100px;
    border: 1px solid darkgreen;
}

靜態定位(static) ：
static，無特殊定位，它是html元素默認的定位方式，4個定位偏移屬性不會被應用。及對它設置 top，right，bottom，left 無效。

相對定位(relative) ：
relative 屬性遵循常規流,也就設置 relative 屬性不會使它脫離文檔流。
如給第一個盒子添加 relative ：

.d1{
    border: 1px solid red;
    position: relative;
    top: 20px;
    left: 20px;
}

可以看出下面的盒子還在原來的位置，而第一個盒子也占據這原來的位置(虛線的地方),并且 top 和 left 定位是相對于父容器的。

好了知道了這一效果，那咱們在給第一個盒子加上 margin / padding ，會有什么變化呢？

.d1{
    border: 1px solid red;
    position: relative;
    margin:10px;
    padding: 10px;
    top: 20px;
    left: 20px;

}

可以看出，第一個盒子在添加 margin 屬性后，盒子偏離了父容器 10px ，加上之前的 top，就是 30px，而 padding 屬性會使盒子撐開了 10px ，下面的其他盒子 d2、d3的位置也受到了影響，往下偏移了 40px ！！為什么是40px 呢，可以看圖中藍色實線部分，假設盒子 d1 沒有 relative 的話，那么當 margin:10px; padding: 10px; 后，整個盒子是不是呈現 藍色實線的狀態， margin 會使 d1盒子上下增加 10px，padding 會使 d1 盒子內容上下撐開10px，合計 d1盒子偏離了40px。

而造成這樣的原因就是 relative 屬性遵循常規流，并沒有脫離文檔流，所以 margin和padding 是會影響
前后元素的位置的。

絕對定位(absoulte) ：
absolute：對象脫離常規流。
給盒子添加屬性：

.d1{
    border: 1px solid red;
    position: absolute;
    top: 20px;
    left: 20px;
}

嗯？ d1盒子怎么跑到了父容器的外面，而且 d2、d3 盒子的位置也受到了影響，往上移動了一個d1的高度。
原來我沒有給父容器添加一個 position:屬性 ，這也引出了 absolute 的一個規則：

使用absoult定位的元素脫離文檔流后，就只能根據祖先類元素(父類以上)進行定位，而這個祖先類還必須是以postion非static方式定位的，
舉個例子，a元素使用absoulte定位，它會從父類開始找起，尋找以position非static方式定位的祖先類元素(注意，一定要是直系祖先才算），直到標簽為止。

所以這樣：

.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;
}

這就是盒子脫離文檔流的現象，脫離了文檔流，那么就不再占據原來的位置了，后面的元素就會頂上去，補充空白位置！

那同樣的，當盒子添加 absolute 屬性，再添加 margin / padding ，會有什么變化呢？

.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 會把 d1 盒子給撐開了 10px。

但都對下面的盒子沒影響，原因也就是 absolute：對象脫離常規流。

固定定位(fixed)：
fixed：與absolute一致，但偏移定位是以窗口為參考。當出現滾動條時，對象不會隨著滾動。
所以：

.d1{
    border: 1px solid red;
    position: fixed;
    top: 20px;
    left: 20px;
}

top 和 left 是以窗口為參考的!。當出現滾動條時，對象不會隨著滾動。還在原來的位置。

最后一點需要注意：使用absoulte或fixed定位的話，必須指定 left、right、 top、 bottom
屬性中的至少一個，否則left/right/top/bottom屬性會使用它們的默認值 auto，也就是相當于 relative 狀態。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111484.html

天坑，CSS之定位Position（六分之五）

摘要：下文稱位置屬性即為。注意，不會脫離文檔流，具體見下面的圖示。直譯為修正，簡單粗暴，直接相對瀏覽器窗口顯示區域定位。 Position定位個人覺得position這個屬性真的算是CSS的見面殺了。尤其是absolute，當年可是被虐的不輕。當然了，現在愛上了這個屬性，誰用誰知道。 position屬性 position是CSS的一個屬性，地位較高，也是我們重點要說的一個屬性。對應了四...

anRui 2019-08-02 10:56 評論0 收藏0
天坑，CSS之定位Position（六分之五）

摘要：下文稱位置屬性即為。注意，不會脫離文檔流，具體見下面的圖示。直譯為修正，簡單粗暴，直接相對瀏覽器窗口顯示區域定位。 Position定位個人覺得position這個屬性真的算是CSS的見面殺了。尤其是absolute，當年可是被虐的不輕。當然了，現在愛上了這個屬性，誰用誰知道。 position屬性 position是CSS的一個屬性，地位較高，也是我們重點要說的一個屬性。對應了四...

xuweijian 2019-08-30 15:54 評論0 收藏0
CSS之position詳解

摘要：元素的位置通過以及屬性進行規定。生成相對定位的元素，相對于其正常位置進行定位。規定應該從父元素繼承屬性的值。表示相對原先位置右邊進行偏移，表示相對原先位置下邊進行偏移。當和同時存在，僅有效，當和同時存在僅有效。定義和用法 position屬性規定元素的定位類型。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。...

PiscesYE 2019-08-29 13:11 評論0 收藏0
CSS 之 Position 屬性

摘要：而造成這樣的原因就是屬性遵循常規流，并沒有脫離文檔流，所以和是會影響前后元素的位置的。 CSS 參考手冊對 position 屬性做了說明： static：對象遵循常規流。此時4個定位偏移屬性不會被應用。 relative：對象遵循常規流，并且參照自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。 absol...

oliverhuang 2019-08-01 15:38 評論0 收藏0