寫給后端的前端筆記：定位（position）

既然都寫了一篇浮動布局，干脆把定位（position）也寫了，這樣后端基本上能學會css布局了。

類別

我們所說的定位position主要有三類：固定定位fixed，相對定位relative，絕對定位absolute。它們都有相同的四個屬性：top，bottom，left，right

區別

主要在於他們的參照物不一樣

<div class="block" id="div1">固定定位bottom: 40px;<br>right: 40px;</div>
<div class="block" id="div2">相對於瀏覽器窗口的絕對定位<br>top: 20px;<br>right: 20px;</div>
<div class="block" id="div3">
相對定位    
    <div class="block" id="div4">相對於父元素的絕對定位<br>right: 10px;<br>top: 20px;</div>
</div>
<div class="block" id="div5">相對定位</div>

.block{
    width: 100px;
    height: 100px;
}

固定定位

固定定位的參照物是瀏覽器窗口，很多窗口廣告就是用的固定定位，無論你怎么滾動或者放大縮小窗口，永遠固定在瀏覽器窗口某個角落。

修改top，bottom，left，right的值可以調整元素在瀏覽器窗口的位置。

#div1{
    position: fixed;
    bottom: 40px;
    right: 40px;
    background: red;
}

絕對定位

絕對定位的參照物是該元素上一級的擁有position:relative屬性的父元素，如果該元素的上一級父元素沒有設置相對定位，那么該元素的參照物就會變成當前頁面。

修改top，bottom，left，right的值可以調整元素在父元素內的位置。

#div2{
    position: absolute;
    top: 20px;
    right: 20px;
    background: green;
}

#div3{
    position: relative;
    width: 300px;
    height: 300px;
    background: blue;
}
#div4{
    position: absolute;
    right: 10px;
    top: 20px;
    background: yellow;
}

相對定位

相對定位的參照物是該元素本來的位置。

修改top，bottom，left，right的值可以讓元素相對於原來的位置上下左右移動。

#div5{
    position: relative;
    top: -20px;
    right: -100px;
    background: grey;
}