position absolute 絕對定位 設置問題

　　 今天在做布局的時候，用到了絕對定位， 父級元素相對定位，子元素兩個，一個元素正常文檔流布局並且在前面，另一個元素絕對定位排在后面，但設置了好久，絕對定位的子元素都不會覆蓋其上面的兄弟元素，最后，不知怎么的，設置了一個left 值，絕對定位元素就上去了，覆蓋到了上面的兄弟元素。這時終於下決心研究一下，絕對定位的top left 值的設置問題，如果沒有設置會怎么樣，設置了一個會怎么樣，設置了兩個呢？

 

1， 父元素相對定位，子元素兩個：一個普通文檔流(塊級元素)，在前，一個決對定位元素，在后。

<div class="parent_relative">
    <div class="child">普通文檔流子元素</div>
    <span class=child_absolute>絕對定位子元素</span>
</div>

2， 先設置一下基本樣式， 父級元素一個藍色邊框，可以清楚看到父元素的位置。 絕對定位子元素 綠色背景，普通文檔流黃色背景。

<style>
        body {
            font: 26px "微軟雅黑";
        }
        .parent_relative{
            position:relative;
            width: 600px;
            height: 400px;
            border: 1px solid blue;
        }
        .child {
            width: 300px;
            height: 200px;
            background: yellow;
        }
        .child_absolute {
            width: 50px;
            height: 100%;
            background: green;
        }
    
    </style>

3， 以后只設置絕對定位子元素 .child_absolute 屬性。

　　　　1， 如果只設置絕對定位，沒有任何top，left 值的設置，就是.child_absolute 添加一句樣式 positon: absolute。 這時可以看到，元素變成塊級元素了（支持寬高）。但位置沒有偏移， 普通文檔流的時候它在什么地方，現在就在什么地方，不會覆蓋上面的元素。

　　2， 在上面的基礎上 ，left：50px; 這時可以看到絕對定位（就是綠色的元素）向右移動了50px; 移動的起點是父元素的左邊緣, 現在絕對定位元素的左邊框距離父元素的左邊框50px. 垂直方向上沒有任何變化，不會覆蓋上面。 如下圖（樣式和效果放到一張圖片上）：

　　 

 

　　3，如果把left改成right:50px, 會怎樣？ 這時看到絕對定位元素跑到了右邊，右邊框和父元素的右邊框相相距50px; 仍然不會上下移動。

 

　　4， 如果把 left 或right 去掉，換成top: 50px;   那么絕對定位元素會向上移動，但元素的左邊貼在父元素的左邊。這時，絕對定位元素上邊框距離父元素的上邊框50px;

　　5, bottom: 50px; 則是絕對元素的底邊距離父元素的底邊50px; 左邊框還是貼在父元素的左邊框上。

 

通過上面可知， 一個元素絕對定位，如果只設置left 或right , 他會在有定位的父級內，在正常文檔流位置的基礎左右移動。

如果只設置top 或botttom,則在正常文檔流決定的位置上下移動。

 

二, 如果 同時設置了left,right, 有沖突, 如 left: 50px; right:50px;   這時,它只會聽從left 的, 位置是由left控制. 同理,當 top 和bottom  屬性沖突時,由top 控制.

三, 有一種常用的子元素在父元素內居的方式如下. 父元素相對定位, 子元素絕對定位,且四個屬性全為0, margin 設為auto, 還要設置width, height 值.

 <div class ="parent">
        <span class="child"></span>
</div>   
// 樣式.
 .parent{
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid blue;
}
.child {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    background: yellow;
}

 

這時如果只設置left:0; right:0; margin:auto; 子元素可以水平居中, 在垂直方向上,它的位置則是由正常文檔流決定的. 這時再設置 top 或bottom, 就可以在垂直方向上的任意位置. 反過來也是一樣,

先設置top,bottom 都為0, 再設置 left 或right , 就會實現垂直居中, 左右任意移動.