第十八天 CSS定位模式Position

有五種方向:top、bottom、left、right、z-index,
這五種方向分別指:
Top:由上往下推多少px。
Bottom: 由下往上推多少px。
Left: 由左往右推多少px。
Right: 由右往左推多少px。
z-index: 上層或底層。
及四種定位模式:static、relative、absolute、fixed
定位模式(一):static

特性1:所有元素預設都是static
特性2:static模式無法使用任何定位相關屬性，如:top、bottom、left、right、z-index。

定位模式(二):relative
如:

{
    position: relative;
}

特性1:以元素原本所在位置定位。
特性2:relative元素仍會在畫面佔據空間。

比較:與padding、margin不同的是，定位不會推開其他的元素而是會與其他元素重疊，且保留原有的空間。
如果我們使用了TOP就不可以在使用bottom反之也成立，同樣的我們使用left就不能再使用right

定位模式(三):absolute
如:

{
    position: absolute;
}

特性1.以最近的上一層元素作為參考來定位。
特性2.做為參考的元素不得為position:static。因為static不可以作為定位的參考。且因為特性的關係，會導致設定absolute的元素會一直往外找，直到非static的上一層，然後定位。且因為absolute不會佔據空間，易造成跑版，因此通常會與relative搭配。
特性3.設定為absolute模式的元素將不會在畫面上占據空間。
Right、top、bottom、left:在不同的定位模式中，會有不同的意思。

定位模式(四):fixed
特性1:以瀏覽器畫布(viewport)做為定位參考。
特性2:fixed定位的元素不會在畫面上佔據空間。
特性3:常用於導覽列、固定式廣告。
看到固定式廣告，我想大家應該都有一個概念了，我們直接上範例，

HTML:

<nav class="navbar">導覽列</nav>

CSS:

.navbar {
    display: block;
    width: 100%;
    height: 50px;
    background: rgb(221, 141, 141);
    box-shadow: 0px 5px 20px rgb(209, 177, 177);
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 1000;
}

這裡有幾個重點要注意，
position設定為fixed之後，整條nav就會浮在上層。
固定要有確切位置，因此設定left、top:0px。
因為我們要一直讓導覽列在整個畫面的最上層，因此直接調整z-index:1000