經典的定位屬性。
static
瀏覽器預設的定位方式，該放在哪就放在哪：
1
2
3
| <div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
|
1
2
3
4
5
6
| .box {
width: 100px;
height: 100px;
margin: 10px 0;
background: orange;
}
|
結果：
relative
根據原本（static）的位置來做偏移，要注意的是不會影響到旁邊的元素。
HTML：
1
2
3
| <div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
|
CSS：
1
2
3
4
5
6
7
8
9
10
11
| .box {
width: 100px;
height: 100px;
margin: 10px 0;
background: orange;
}
.box:nth-child(2) {
position: relative;
left: 120px;
top: 50px;
}
|
結果：
absolute
針對某個參考點來定位。就像 relative 是針對原本（static）的位置來定位一樣，absoulte 是讓你可以自己指定要參考點。
至於參考點的機制是：往上找不是 static 的元素，如果都找不到就把「視窗（viewport）」當參考點。
備註：要注意旁邊的元素會自動遞補空間。
下面讓 box-inner 以 box:nth-child(2) 來做定位：
1
2
3
4
5
6
7
8
9
| <div class="box">box1</div>
<div class="box">
box-2
<div class="box-inner">X</div>
</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<div class="box">box6</div>
|
CSS：
1
2
3
4
5
6
7
8
9
| .box:nth-child(2) {
position: relative;
}
.box-inner {
position: absolute;
top: 0;
right: 0;
background: red;
}
|
結果：
如果沒有設定參考點的話就會定位到視窗（viewport）：
1
2
3
4
5
6
| .box-inner {
position: absolute;
top: 0;
right: 0;
background: red;
}
|
結果：
備註：如果你不信的話，試著把 <html> 跟 <body> 都設成固定寬高，就會發現元素的位置隨著不會改變，這就證明參考點不是它們。
fixed
根據視窗（viewport）的位置來定位，特性是不管怎麼捲動都會在原本的位置。
備註：要注意旁邊的元素會自動遞補空間。
1
2
3
4
5
6
| <div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<div class="box">box6</div>
|
CSS：
1
2
3
4
5
6
7
8
| .box:nth-child(2) {
position: fixed;
width: 100px;
height: 100px;
right: 100px;
bottom: 100px;
background-color: red;
}
|
結果：
sticky
在碰到 top 的點之前是 static，碰到之後就黏住（很像 fixed 的感覺）：
備註：此處的參考點是視窗（viewport）
CSS：
1
2
3
4
5
| .box:nth-child(2) {
position: sticky;
top: 10px;
background-color: red;
}
|
結果：
z-index
用來設定圖層的位置，舉例來說：
1
2
3
4
5
6
7
8
| <body>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<div class="box">box6</div>
</body>
|
CSS：
1
2
3
4
5
6
7
8
9
10
11
12
13
| .box {
background: orange;
width: 300px;
height: 200px;
margin: 10px 0px;
font-size: 2em;
text-align: center;
position: relative;
}
.box:nth-child(2) {
top: -100px;
background-color: red;
}
|
結果：
CSS：
1
2
3
4
5
6
7
8
9
10
11
12
13
| .box {
background: orange;
width: 300px;
height: 200px;
margin: 10px 0px;
font-size: 2em;
text-align: center;
position: relative;
}
.box:nth-child(2) {
top: 100px;
background-color: red;
}
|
結果：
同樣都是覆蓋，但在後面的會蓋掉前面的，如果不想被蓋呢？加上 z-index
CSS：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .box {
background: orange;
width: 300px;
height: 200px;
margin: 10px 0px;
font-size: 2em;
text-align: center;
position: relative;
}
.box:nth-child(2) {
top: 100px;
background-color: red;
z-index: 1;
}
|
結果：
