CSS_position用法

Posted on Edited on In

在 CSS 中，總共有四種 position

  • position 總共有四種：（口訣：rafs）
position: 是否會 remain in the natural flow of the page 是否會被子元素當作定位點（anchor point）
static 會 不會
relative 會 會
absolute 不會，而是會以離它最近且有被下position（除了static之外）的父元素為定位點 會
fixed 不會，而是以瀏覽器viewport為定位點 會

教學網址

position: static;

用法說明：

  • position的「預設值」
  • 按照元素的自然方式排列

css語法：

1
2
3
4
5
6
7
8
div#myDIV {
  position:static;
  width:100px;
  height:100px;
  background:red;
  left:10px;
  top:100px;
}

範例html語法：

1
2
3
<div id="parent1">Parent1: position: static.
  <div id="child1">Child1: position: absolute, right: 15px, top: 70px</div>
</div>

範例css語法：

1
2
3
4
5
6
7
8
9
10
11
12
13
#parent1 {
  position: static;
  border: 1px solid blue;
  width: 300px;
  height: 100px;
}

#child1 {
  position: absolute;
  border: 1px solid red;
  top: 70px;
  right: 15px;
}

說明：

#parent1有下position: static;

  • It will remain in the natural flow of the page.
  • #parent1 不會被子元素#child1當作是 position: absolute; 的定位點

Results:

position: relative;

用法說明：

  • 元素會相較於「它自己原本的位置」去做移動

css語法：

1
2
3
4
5
6
7
8
div#myDIV {
  position:relative;
  width:100px;
  height:100px;
  background:red;
  left:10px;
  top:100px;
}

範例html語法：

1
2
3
<div id="parent2">Parent2: position: relative.
  <div id="child2">Child2: position: absolute, right: 15px, top: 70px</div>
</div>

範例css語法：

1
2
3
4
5
6
7
8
9
10
11
12
13
#parent2 {
  position: relative;
  border: 1px solid blue;
  width: 300px;
  height: 100px;
}

#child2 {
  position: absolute;
  border: 1px solid red;
  top: 70px;
  right: 15px;
}

說明：

#parent2 有下 position: relative;

  • It will remain in the natural flow of the page.
  • #parent2 會被子元素 #child2 當作是 position: absolute; 的定位點

Results:

position: absolute;

用法說明：

  • 元素會以離它最近且有被下position（除了static之外）的父元素為定位點去移動

css語法：

1
2
3
4
5
6
7
8
div#myDIV {
  position:absolute;
  width:100px;
  height:100px;
  background:red;
  left:10px;
  top:100px;
}

範例html語法：

1
2
3
<div id="parent3">Parent3: position: absolute, top: 750px, right: 15px.
  <div id="child3">Child3: position: absolute, right: 15px, top: 70px</div>
</div>

範例css語法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#parent3 {
  position: absolute;
  border: 1px solid blue;
  width: 300px;
  height: 100px;
  top: 750px;
  right: 15px;
}

#child3 {
  position: absolute;
  border: 1px solid red;
  top: 70px;
  right: 15px;
}

說明：

#parent3 有下 position: absolute;

  • It will NOT remain in the natural flow of the page. 而是會以離它最近且有被下position（除了static之外）的父元素為定位點
  • #parent3 會被子元素 #child3 當作是 position: absolute; 的定位點

Results:

position: fixed;

用法說明：

  • 元素會以瀏覽器視窗為定位點去移動

css語法：

1
2
3
4
5
6
7
8
div#myDIV {
  position:fixed;
  width:100px;
  height:100px;
  background:red;
  left:10px;
  top:100px;
}

範例html語法：

1
2
3
<div id="parent4">Parent4: position: fixed, bottom: 0, left: 0, right: 0.
  <div id="child4">Child4: position: absolute, right: 15px, top: 70px</div>
</div>

範例css語法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#parent4 {
  position: fixed;
  border: 1px solid blue;
  background-color: rgba(255,200,200,0.5);  
  width: 300px;
  height: 100px;
  bottom: 0;
  left: 0;
  right: 0;
}

#child4 {
  position: absolute;
  border: 1px solid red;
  top: 70px;
  right: 15px;
}

說明：

#parent4 有下 position: fixed;

  • It will NOT remain in the natural flow of the page. 而是以瀏覽器viewport為定位點
  • #parent4 會被子元素 #child4 當作是 position: absolute; 的定位點

Results: