css定位

position 屬性的值

• static ---默認值
• relative ---相對定位
• absolute ---絕對定位
• fixed ---固定定位
• sticky ---粘性定位（本文不講這個）

position:static

• 該關鍵字指定元素使用正常的布局行為，即元素在文檔常規流中當前的布局位置。
• 此時 top right bottom left 和 z-index 屬性無效。

position:relative

• 該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調整元素位置（因此會在此元素未添加定位時所在位置留下空白）。
• 注意：元素並未脫離文檔流

.box {
    width: 100px;
    height: 100px;
    background: lightgreen;
    color: #000;
    border: 1px solid #ccc;
}

#two {
    position: relative;
    top: 20px;
    left: 20px;
    background: lightcoral;
}

#outer {
    margin: 0 auto;
    width: 500px;
    height: 500px;
    border: 1px solid #000;
}

<div id="outer">
    <div class="box" id="one">One</div>
    <div class="box" id="two">Two</div>
    <div class="box" id="three">Three</div>
    <div class="box" id="four">Four</div>
</div>

我們在圖中可以看到，two元素相對於自身原來的位置進行了調整，但並沒有影響到其他元素。

發現一個問題：看下圖

一開始的css中我們使用了top:20px和left:20px將two元素進行了調整，通過上圖就會發現這兩個20px並不屬於盒子模型，他只是用定位將two元素進行了位置調整。

接下來我們在其他不改變的情況下將top:20px和left:20px 換為 margin-top: 20px和margin-left: 20px

#two {
    position: relative;
    /* top: 20px;
    left: 20px; */
    margin-top: 20px;
    margin-left: 20px;
    background: lightcoral;
}

與上面的使用top和left時我們發現有兩點不同:

• margin-top和margin-left的兩個20px屬於盒模型中的 margin
• 看藍色框框標示的地方，two元素強制將three元素向下撐了

position:absolute

• 絕對定位元素相對於最近的非 static 祖先元素定位。當這樣的祖先元素不存在時，則相對於 ICB（inital container block, 初始包含塊（根元素所在的包含塊））。
• 因為默認是static所以一般我們使用絕對定位時給祖先元素(經常是父級元素)加上position:relative。
• 在布置文檔流中其它元素時，絕對定位元素不占據空間。
• 絕對定位的元素則脫離了文檔流。

什么是包含塊?

• 包含塊：包含塊簡單說就是定位參考框，或者定位坐標參考系，元素一旦定義了定位顯示（相對、絕對、固定）都具有包含塊性質，它所包含的定位元素都將以該包含塊為坐標系進行定位和調整。
• 初始包含塊：用戶代理選擇根元素作為包含塊（稱之為初始 containing block）。

.box {
    background: lightgreen;
    width: 100px;
    height: 100px;
    float: left;
    color: white;
    border: 1px solid #ccc;
}

#three {
    position: absolute;
    top: 20px;
    left: 20px;
}

#outer {
    position: relative;
    margin: 0 auto;
    width: 500px;
    height: 500px;
    border: 1px solid #000;
}

<div id="outer">
    <div class="box" id="one">One</div>
    <div class="box" id="two">Two</div>
    <div class="box" id="three">Three</div>
    <div class="box" id="four">Four</div>
</div>

我們給outer即one two three four 四個元素的父級元素加上了position:relative給three加了position: absolute並通過top: 20px left: 20px改變了它的位置，由效果圖我們可以看到，three元素脫離了文檔流（不占空間，不會影響其他元素），並相對於outer元素進行了位置調整。

position：fixed

• 固定定位與絕對定位相似，但元素的包含塊為 viewport 視口（包含塊由視口建立）。
• 常用於創建在滾動屏幕時仍固定在相同位置的元素。

#outer {
    width: 200px;
    height: auto;
    margin: 0 auto;
}

#fix {
    position: fixed;
    top: 100px;
    right: 0px;
    width: 50px;
    height: 100px;
    background-color: aqua;
}

<div id="outer">
    <p>《再別康橋》</p>
    <p>作者： 徐志摩</p>
    <p>輕輕的我走了， </p>
    <p>正如我輕輕的來； </p>
    <p>我輕輕的招手， </p>
    <p>作別西天的雲彩 </p>
    <p>---</p>
    <p>那河畔的金柳， </p>
    <p>是夕陽中的新娘； </p>
    <p>波光里的艷影， </p>
    <p>在我的心頭盪漾 </p>
    <p>---</p>
    <p>軟泥上的青荇， </p>
    <p>油油的在水底招搖;</p>
    <p>在康河的柔波里， </p>
    <p>我甘心做一條水草 </p>
    <p>---</p>
    <p>那榆蔭下的一潭， </p>
    <p>不是清泉，是天上虹； </p>
    <p>揉碎在浮藻間， </p>
    <p>沉淀着彩虹似的夢。 </p>
    <p>---</p>
    <p>尋夢？撐一支長篙，</p>
    <p>向青草更青處漫溯；</p>
    <p>滿載一船星輝，</p>
    <p>在星輝斑斕里放歌。</p>
    <p>---</p>
    <p>但我不能放歌， </p>
    <p>悄悄是別離的笙簫； </p>
    <p>夏蟲也為我沉默， </p>
    <p>沉默是今晚的康橋！ </p>
    <p>---</p>
    <p>悄悄的我走了， </p>
    <p>正如我悄悄的來； </p>
    <p>我揮一揮衣袖， </p>
    <p>不帶走一片雲彩。 </p>
</div>
<div id="fix"></div>

• 定位元素處於右上角，當瀏覽頁面底部時，它相對於 viewport 視口仍處於同一位置。
• 我們只需要給要固定的元素加上position: fixed在通過 top 或bottom 和left 或right 調整位置就能實現固定元素的效果。

小技巧

• 給元素設置position:fixed后再設置 left：0 和 right: 0 相當於給元素設置了 width: 100%.
• 有時給元素設置了position:fixed后無法上下滾動, 同時給元素設置top 0 bottom 0 解決.