定位-有解無憂

一、position屬性：

static：無特殊定位，物件遵循正常檔案流，top，right，bottom，left等屬性不會被應用，

relative：物件遵循正常檔案流，但將依據top，right，bottom，left等屬性在正常檔案流中偏移位置，而其層疊通過z-index屬性定義，

absolute：物件脫離正常檔案流，使用top，right，bottom，left等屬性進行絕對定位，而其層疊通過z-index屬性定義，

fixed：物件脫離正常檔案流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，物件不會隨著滾動，而其層疊通過z-index屬性定義，

二、

1、靜態定位(static) ：

? static，無特殊定位，它是html元素默認的定位方式，即我們不設定元素的position屬性時默認的position值就是static，它遵循正常的檔案流物件，物件占用檔案空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的，

2、相對定位(relative) ：

相對定位相對的是它原本在檔案流中的位置而進行的偏移，而我們也知道relative定位也是遵循正常的檔案流，它沒有脫離檔案流，但是它的top/left/right/bottom屬性是生效的，可以說它是static到absoult的一個中間過渡屬性，最重要的是它還占有檔案空間，而且*占據的檔案空間不會隨 top / right / left / bottom 等屬性的偏移而發生變動，

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a{
        width: 300px;
        height: 200px;
        background-color: pink;
        position: relative;
        top: 20px;
        left: 20px;
    }
    .b{
        width: 300px;
        height: 200px;
        background-color:red;
    }
</style>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>

而margin / padding會讓該檔案空間產生偏移

.a{
        width: 300px;
        height: 200px;
        background-color: pink;
        /* position: relative;
        top: 20px;
        left: 20px; */
        margin-top: 20px;
        margin-left: 20px;
    }

3、絕對定位(absoulte) ：

使用absoult定位的元素脫離檔案流后，就只能根據祖先類元素(父類以上)進行定位，而這個祖先類還必須是以postion非static方式定位的，舉個例子，a元素使用absoulte定位，它會從父類開始找起，尋找以position非static方式定位的祖先類元素(注意，一定要是直系祖先~），直到標簽為止，這里還需要注意的是，relative和static方式在最外層時是以標簽為定位原點的，而absoulte方式在無父級是position非static定位時是以作為原點定位，和元素相差9px左右，

栗子：

 .a{
        width: 300px;
        height: 200px;
        background-color: pink;
        position: absolute;
        top: 20px;
        left: 20px;
    }

注意！！！：使用absoulte或fixed定位的話，必須指定 left、right、 top、 bottom 屬性中的至少一個，否則left/right/top/bottom屬性會使用它們的默認值 auto ，這將導致物件遵從正常的HTML布局規則，在前一個物件之后立即被呈遞，簡單講就是都變成relative會占用檔案空間，這點非常重要，

如果top和bottom一同存在的話，那么只有top生效，

如果left和right一同存在的話，那么只有left生效，

而如果給其添加margin會讓子類的absoulte跟著偏移，而padding卻不會讓子類的absoulte發生偏移

也就是說absoulte是根據祖先類的border進行的定位

注意：絕對(absolute)定位物件在可視區域之外會導致滾動條出現，而放置相對(relative)定位物件在可視區域之外，滾動條不會出現，

栗子：

.a{
        width: 300px;
        height: 200px;
        background-color: pink;
        position: absolute;
        top: 20px;
        left: 20px;
        /* padding: 20px; */
        margin: 20px;
    }

4、固定定位(fixed)：

脫離了檔案流，并且能夠根據top、right、left、bottom屬性進行定位，但不同的是fixed是根據視窗為原點進行偏移定位的，也就是說它不會根據滾動條的滾動而進行偏移，

而如果給其添加margin會讓子類的absoulte跟著偏移，而padding卻不會讓子類的absoulte發生偏移

也就是說fixed是根據祖先類的border進行的定位

例子：

 .a{
        width: 300px;
        height: 200px;
        background-color: pink;
        position:fixed;
        top: 20px;
        left: 20px;
        /* padding: 20px; */
        margin: 20px;
    }

5、z-index屬性：

又稱為物件的層疊順序，它用一個整數來定義堆疊的層次，整數值越大，則被層疊在越上面，當然這是指同級元素間的堆疊，如果兩個物件的此屬性具有同樣的值，那么將依據它們在HTML檔案中流的順序層疊，寫在后面的將會覆寫前面的，需要注意的是，父子關系是無法用z-index來設定上下關系的，一定是子級在上父級在下，

注意：使用static 定位或無position定位的元素z-index屬性是無效的，

例子：

.a{
        width: 300px;
        height: 200px;
        background-color: pink;
        position:fixed;
        top: 20px;
        left: 20px;
        z-index: 0;
    }
    .b{
        position:relative;
        z-index: 1;
        height: 100px;
        background-color:red;
    }

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

標籤：其他

上一篇：周總結

下一篇：初識JavaScript