定位 position

時間 2021-01-02

標籤 css html 瀏覽器佈局 code htm 文檔 class 欄目系統網絡简体版

原文原文鏈接

position 定位

定位是一種更加高級的佈局手段，經過定位能夠將元素擺放到頁面的任意位置css

使用 position 屬性來設置定位html

可選值：瀏覽器

static 默認值，元素是靜止的沒有開啓定位佈局
relative 開啓元素的相對定位code
absolute 開啓元素的絕對定位htm
fixed 開啓元素的固定定位文檔
sticky 開啓元素的粘滯定位it

偏移量（offset）

當元素開啓了定位之後，能夠經過偏移量來設置元素的位置io

top 定位元素和定位位置上邊的距離class
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 class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">
    	3
        <div class="box4">4</div>
    </div>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。