CSS定位

CSS定位

首先CSS的定位機制有普通流，浮動和絕對定位。

• position:static 靜態定位 （默認情況下的定位，是沒有效果的。）
• position:relative 相對定位（相對於原來的位置進行定位，佔用原文檔流的空間）
• position:absolute 絕對定位（相對於定位了的父級或者body進行定位，一般在父級使用relative進行定位，子級相對於父級進行絕對定位，不佔用原文檔流空間）
• postion:fixed 相對於瀏覽器窗口定位

屬性偏移量

• left 距離左側邊距的距離
• top 距離上側邊距的距離
• bottom 距離下側邊距的距離
• right 距離右側邊距的距離

<style>
.d1{
    background-color: red;
    border: 1px solid ;
    width: 70%;
    height: 1000px;
}
.d2{
    background-color: black;
    border: 1px solid ;
    width: 20%;
    height: 150px;
}
.d3{
    background-color: pink;
    border: 1px solid ;
    width: 20%;
    height: 150px;
}
.d4{
    background-color: yellow;
    border: 1px solid ;
    width: 20%;
    height: 150px;
}
</style>
<div class="d1">
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
</div>

原效果：

給父級加上絕對定位，給第一個子div加上相對定位，給第二個子div加上絕對定位。

實現效果：

可以看到第一個div相對於原來的位置向右偏移了300px,但原來的位置還在，
由於父級進行了相對定位，第二個div就可以相對於父級進行定位，但原位置被後一個div覆蓋。

根據原理，如果父級沒有進行定位，第二個div會根據body定位，我們把父級的偏移換成margin，絕對定位的自己偏移量爲left:0,top:0

效果如下：