3.1 CSS定位屬性position

說明：css定位改變元素在頁面上的位置。

1. css定位機制

  • 普通流(static無定位 + relative相對定位)：元素按其在HTML的上下或左右順序排布

相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。static默認(rèn)靜態(tài)定位和relative相對定位的區(qū)別在于：靜態(tài)布局不支持上下左右偏移量和z-index堆疊設(shè)置。

讓一個元素脫離文檔流的方法有兩種：即浮動（float）和定位（position）。

  • 絕對定位(absolute絕對定位+fixed固定定位)：元素脫離文檔流

absolute絕對定位和fixed固定定位的區(qū)別在于：絕對定位須相對于static定位以外的第一個父元素進(jìn)行定位，固定定位是相對于瀏覽器進(jìn)行定位。
eg：元素A使用絕對定位，須相對于static定位以外的第一個父元素進(jìn)行定位。若緊鄰的父元素是static定位，需繼續(xù)向上查找，直到找到第一個非static定位的父元素B'，該元素A相對于父元素B'進(jìn)行定位；若緊鄰的父元素B是非static定位(relative/absolute/fixed)，則該元素A就是相對于父元素B進(jìn)行定位的。

2. css定位屬性

屬性 描述
position 把元素放置到一個靜態(tài)的、相對的、絕對的、或固定的位置中。
top 元素向上的偏移量
right 元素向右的偏移量
bottom 元素向上的偏移量
left 元素向左的偏移量
overflow 設(shè)置當(dāng)元素內(nèi)容溢出其區(qū)域發(fā)生的事情
clip 設(shè)置元素顯示的形狀，主要用作圖片。元素被剪入這個形狀之中，然后顯示出來。
vertical-align 設(shè)置元素垂直對齊方式，該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊
z-index 設(shè)置元素的堆疊順序

positon可能的值：

值 描述
static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中。忽略"left", "top", "right", "bottom"或者"z-index"聲明。
relative 生成相對定位的元素，相對于其正常位置進(jìn)行定位。元素的位置通過"left", "top", "right", "bottom"屬性進(jìn)行規(guī)定?？赏ㄟ^z-index進(jìn)行層次分級。
absolute 生成絕對定位的元素，相對于static定位以外的第一個父元素進(jìn)行定位。元素的位置通過"left", "top", "right", "bottom"屬性進(jìn)行規(guī)定?？赏ㄟ^z-index進(jìn)行層次分級。
fixed 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過"left", "top", "right", "bottom"屬性進(jìn)行規(guī)定?？赏ㄟ^z-index進(jìn)行層次分級。
inherit 規(guī)定應(yīng)該從父元素繼承position屬性的值

(0) 普通流(默認(rèn)靜態(tài))：元素按上下或左右順序排列
position.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link href="style_position.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="position"></div>
    <script>
        for (var i=0; i<100; i++) {
            document.write(i + "<br/>");
        }
    </script>
</body>
</html>

style_position.css

#position{
    width: 100px;
    height: 100px;
    background-color: blue;
}
普通流.png

(1) 靜態(tài)布局

/*static：不脫離文檔流，會隨頁面滾動。static和relative的區(qū)別在于，靜態(tài)布局不支持上下左右偏移量和z-index堆疊設(shè)置*/
#position{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: static;
}
靜態(tài)布局.png

(2) 相對布局

/*relative：不脫離文檔流，會隨頁面滾動*/
#position{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    top: 20px;
    left: 20px;
}

相對布局.png

解疑：為什么列表會超出方塊？列表未設(shè)置樣式，但默認(rèn)是靜態(tài)布局，方塊設(shè)置為相對布局，兩者都在普通流里，按順序排列；方塊因為設(shè)置了偏移，所以與正常排布的位置不同，但是列表仍保持其原來應(yīng)該所在的位置，方塊的偏移并不影響列表在普通流中排布的位置。
備注：relative和static的區(qū)別在于，靜態(tài)布局不支持上下左右偏移量和z-index堆疊設(shè)置。
說明：z-index的值無上限但盡量設(shè)置在100以內(nèi)，值大的元素可覆蓋值小的元素，更近地顯示在用戶面前。

(3) 絕對布局：脫離文檔流，會隨頁面滾動

/*absolute：脫離文檔流，會隨頁面滾動*/
#position{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 20px;
    left: 20px;
}
絕對布局.png

(4) 固定布局：脫離文檔流，不隨頁面滾動

/*fixed：脫離文檔流，不隨頁面滾動*/
#position{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: fixed;
    top: 20px;
    left: 20px;
}

固定布局.png

備注：fixed和absolute的區(qū)別在于，固定布局元素始終會在屏幕的某個位置不動。

3. 偏移量與堆疊順序

(1) 相對布局+偏移量
position.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link href="style_position.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="position_1"></div>
    <div id="position_2"></div>
    <script>
        for (var i=0; i<100; i++) {
            document.write(i + "<br/>");
        }
    </script>
</body>
</html>

style_position.css

#position_1{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    top: 20px;
    left: 20px;
}
#position_2{
     width: 100px;
     height: 100px;
     background-color: aqua;
     position: relative;
     top: 10px;
     left: 10px;
 }

效果1.png

(2) 相對布局+偏移量+堆疊順序

#position_1{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    top: 20px;
    left: 20px;
    z-index: 2;
}
#position_2{
     width: 100px;
     height: 100px;
     background-color: aqua;
     position: relative;
     top: 10px;
     left: 10px;
     z-index: 1;
 }

效果2.png

(3) 絕對布局+偏移量+堆疊順序

#position_1{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
}
#position_2{
     width: 100px;
     height: 100px;
     background-color: aqua;
     position: absolute;
     top: 10px;
     left: 10px;
     z-index: 2;
 }

效果3.png

(4) 絕對布局+偏移量+堆疊順序

#position_1{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
}
#position_2{
     width: 100px;
     height: 100px;
     background-color: aqua;
     position: absolute;
     top: 10px;
     left: 10px;
     z-index: 2;
 }
#position_3{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 1;
}

效果4.png

(5) 絕對布局+固定布局+偏移量+堆疊順序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link href="style_position.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="position_1"></div>
    <div id="position_2"></div>
    <div id="position_3"></div>
    <script>
        for (var i=0; i<100; i++) {
            document.write(i + "<br/>");
        }
    </script>
</body>
</html>

#position_1{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
}
#position_2{
     width: 100px;
     height: 100px;
     background-color: aqua;
     position: absolute;
     top: 10px;
     left: 10px;
     z-index: 1;
 }
#position_3{
    width: 100px;
    height: 100px;
    background-color: red;
    position: fixed;
    top: 200px;
    left: 200px;
    z-index: 99;
}
效果5.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容