你真的認識css裏面的position麼？！

時間 2019-11-08

標籤認識 css 裏面 position 欄目 CSS 简体版

原文原文鏈接

開門見山，第一篇文章咱們來講說css裏面最經常使用的position屬性
原因一次筆者面試，被問及了下面的代碼，面試官讓我畫出這5個div的位置，自覺得對css成竹在胸的我看到正確答案的那一刻也是吃驚很多，因而回家翻閱文檔，想看看relative究竟是相對什麼定位，absolute究竟是怎麼絕對定位。
看代碼：css

<style>
    div {
        border: 1px solid #000;
    }
    .div1{
        width:60px;
        height:120px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .div2 {
        width:120px;
        height:60px;
        position: relative;
        top:30px;
        left:30px;
    }
    .div3 {
        width:120px;
        height:60px;
        position: relative;
        top:15px;
        left:15px;
    }
    .div4 {
        width:120px;
        height:60px;
        position: absolute;
        right:0;
    }
    .div5 {
        width:60px;
        height:120px;
    }
</style>
<body>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
    <div class="div5">5</div>
</body>

你們有個大概的印象，先不急着說答案，咱們從MDN上面的關於absolute和relative的概念提及（本文不對fixed作重點）html

relative:
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.面試

absolute:
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.app

筆者粗略翻譯一下：佈局

reletive：
這個關鍵字展現元素就好像沒被定位過同樣，在不改變佈局的前提下調整元素位置（所以會在該元素原本的位置留下一個空白）。position:relative對table-*-group,table-row, table-column, table-cell, table-caption無效。spa
absolute：
不給元素保留空間，相反，元素定位的位置是相對它最近的非static定位的祖先元素來肯定的。絕對定位的元素能夠設置外邊距，而且不會與其餘邊距合併。翻譯

（之因此沒用MDN中文版翻譯是以爲翻譯的很差，雖然我翻譯的也不咋地。。。）code

換成個人理解：htm

relative定位以後不改變文檔流位置，保留其定位以前的文檔流位置blog
absolute改變文檔流，而且是相對於第一個被定位過的（非static）祖先元素定位，若是沒有就是根元素

相信你們對於absolute沒有什麼異議，可是relative我相信很大一部分人沒有注意過「保留其定位以前的文檔流位置」這句話，這纔是重點，看代碼來講明

<style>
    body,div {
        border: 1px solid #000;
    }
    .wrap {
        margin: 100px 0 0 100px;
        width: 400px;
        height: 400px;
    }
    .div1 {
        width:120px;
        height:60px;
        position: relative;
        top:30px;
        left:30px;
    }
    .div2{
        width:60px;
        height:120px;
        position: absolute;
        top: 30px;
        left: 30px;
    }        
    .div3 {
        width:120px;
        height:60px;
        position: relative;
        top:15px;
        left:15px;
    }
</style>
<body>
我是body
<div class="wrap">
    我是wrapper
    <div class="div1">1111</div>
    <div class="div2">2222</div>
    <div class="div3">3333</div>
</div>
</body>

結果見下圖：

好的，咱們如今來分析一下：

div2不用說，因爲父元素wrap沒有進行定位，所以他基於html來定位(注意不是body);
重點說應用了relative的div1和div3，能夠明顯從圖中看到div1距離wrap的left和top根本不同啊，什麼鬼啊，但是咱們明明設置的都是30px啊，請你們想一下文檔中說的那句話「保留其定位以前的文檔流位置」，那是否是能夠理解成他是基於元素給定relative以前的文檔流位置定位的呢，下面咱們就來檢驗下看看是否是成立