成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 之 Position 屬性

jas0n / 621人閱讀

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

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

static： 對象遵循常規(guī)流。此時(shí)4個(gè)定位偏移屬性不會被應(yīng)用。


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


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


fixed： 與absolute一致，但偏移定位是以窗口為參考。當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對象不會隨著滾動(dòng)。

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

下面例子的 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，無特殊定位，它是html元素默認(rèn)的定位方式，4個(gè)定位偏移屬性不會被應(yīng)用。及對它設(shè)置 top，right，bottom，left 無效。

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

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

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

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

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

}

可以看出 ，第一個(gè)盒子在添加 margin 屬性后 ，盒子偏離了父容器 10px ，加上之前的 top，就是 30px， 而 padding 屬性會使 盒子 撐開了 10px ，下面的其他盒子 d2、d3的位置也受到了影響，往下偏移了 40px ?。槭裁词?0px 呢，可以看圖中藍(lán)色實(shí)線部分，假設(shè)盒子 d1 沒有 relative 的話 ，那么 當(dāng) margin:10px; padding: 10px; 后，整個(gè)盒子是不是呈現(xiàn) 藍(lán)色實(shí)線的狀態(tài)， margin 會使 d1盒子 上下增加 10px，padding 會使 d1 盒子內(nèi)容上下?lián)伍_10px，合計(jì) d1盒子偏離了40px。

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

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

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

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

使用absoult定位的元素脫離文檔流后，就只能根據(jù)祖先類元素(父類以上)進(jìn)行定位，而這個(gè)祖先類還必須是以postion非static方式定位的，
舉個(gè)例子，a元素使用absoulte定位，它會從父類開始找起，尋找以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ù)原來的位置了，后面的元素就會頂上去，補(bǔ)充空白位置！

那同樣的 ，當(dāng)盒子添加 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： 對象脫離常規(guī)流。

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

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

top 和 left 是以窗口為參考的!。當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對象不會隨著滾動(dòng)。還在原來的位置。

最后一點(diǎn)需要注意： 使用absoulte或fixed定位的話，必須指定 left、right、 top、 bottom
屬性中的至少一個(gè)，否則left/right/top/bottom屬性會使用它們的默認(rèn)值 auto，也就是相當(dāng)于 relative 狀態(tài)。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111484.html

相關(guān)文章

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

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

    anRui 評論0 收藏0

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

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

    xuweijian 評論0 收藏0

  • CSS之position詳解

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

    PiscesYE 評論0 收藏0

  • CSS 之 Position 屬性

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

    oliverhuang 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<