position 定位

定位是一種更加高級的布局手段，通過定位可以將元素擺放到頁面的任意位置

使用 position 屬性來設定定位

可選值：

static 默認值，元素是靜止的沒有開啟定位
relative 開啟元素的相對定位
absolute 開啟元素的絕對定位
fixed 開啟元素的固定定位
sticky 開啟元素的粘滯定位

偏移量（offset）

當元素開啟了定位以后，可以通過偏移量來設定元素的位置

top 定位元素和定位位置上邊的距離
bottom 定位元素和定位位置下邊的距離

定位元素垂直方向的位置由top和bottom兩個屬性來控制

通常情況下我們只會使用其中一

top值越大，定位元素越向下移動，bottom值越大，定位元素越向上移動

left 定位元素和定位位置的左側距離
right 定位元素和定位位置的右側距離

定位元素水平方向的位置由left和right兩個屬性控制

通常情況下只會使用一個

left越大元素越靠右，right越大元素越靠左

相對定位

當元素的position屬性值設定為 relative 時則開啟了元素的相對定位

相對定位的特點

元素開啟相對定位以后，如果不設定偏移量元素不會發生任何的變化
相對定位是參照于元素在檔案流中的位置進行定位的（不會脫離檔案流）
相對定位會提升元素的層級
相對定位不會使元素脫離檔案流
相對定位不會改變元素的性質塊還是塊，行內還是行內

.box2{
    width: 200px;
    height: 200px;
    background-color: orange;

    position: relative;
    left: 100px;
    top: -200px;
}

絕對定位

當元素的position屬性值設定為 absolute 時，則開啟了元素的絕對定位，常用，

絕對定位的特點

開啟絕對定位后，如果不設定偏移量元素的位置不會發生變化
開啟絕對定位后，元素會從檔案流中脫離
絕對定位會改變元素的性質，行內變成塊，塊的寬高被內容撐開
.絕對定位會使元素提升一個層級
絕對定位元素是相對于其包含塊進行定位的（開啟定位的包含塊）

包含塊( containing block )

正常情況下：

包含塊就是離當前元素最近的祖先塊元素

絕對定位的包含塊:

包含塊就是離它最近的開啟了定位的祖先元素
如果所有的祖先元素都沒有開啟定位，則根元素就是它的包含塊

html（根元素、初始包含塊）

固定定位

將元素的 position 屬性設定為 fixed 則開啟了元素的固定定位

固定定位也是一種絕對定位，所以固定定位的大部分特點都和絕對定位一樣

唯一不同的是固定定位永遠參照于瀏覽器的視口進行定位（包含塊是瀏覽器視口）

固定定位的元素不會隨網頁的滾動條滾動

粘滯定位

當元素的position屬性設定為 sticky 時則開啟了元素的粘滯定位，相對來說是比較新的定位方式

粘滯定位和相對定位的特點基本一致，不同的是粘滯定位可以在元素到達某個位置時將其固定

絕對定位元素的布局

當我們開啟了絕對定位后，水平布局：

left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含塊的內容區的寬度

也就是在盒子模型水平方向的布局等式上添加了 left 和 right 兩個值

當發生過度約束：

? 如果9個值中沒有 auto 則自動調整 right 值以使等式滿足

? 如果有auto，則自動調整 auto 的值以使等式滿足

? 可設定auto的值：margin width left right

? 因為left 和 right的值默認是auto，所以如果不設定 left 和 right ，則等式不滿足時，會自動調整這兩個值

.box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    /* 設定水平居中 */
    margin: auto;
    
    left: 0;
    right: 0;
}

垂直方向布局的等式的也必須要滿足

top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含塊的高度

.box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    /* 設定水平、垂直居中 */
    margin: auto;
    
    left: 0;
    right: 0;
    
    top: 0;
    bottom: 0;
}

元素的層級 z-index

對于開啟了定位元素，可以通過z-index屬性來指定元素的層級

z-index 需要一個整數作為引數，值越大元素的層級越高，元素的層級越高越優先顯示
如果元素的層級一樣，則優先顯示靠下的元素

祖先的元素的層級再高也不會蓋住后代元素

注意：z-index 的值最好不要設定負值

<head>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            position: absolute;
            z-index: 3;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: rgba(255, 0, 0, 0.3);
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 2;
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 3;
        }

        .box4 {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
        }
    </style>
</head>
<body>
    <div >1</div>
    <div >2</div>
    <div >
    	3
        <div >4</div>
    </div>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/237511.html

標籤：Html/Css

上一篇：如何使用FTP軟體連接WordPress網站

下一篇：字體

定位 position