內容目錄
position的介紹
position在CSS編排是非常重要的語法之一，可以設計出更複雜的版面配置，好好掌握在排版上就能有更高的自由度，其中特別重要的四個值分別為static(預設值)、relative (相對定位)、fixed(固定定位)、absolute (絕對定位)
static(預設值)
Static是position的預設值，他不會被定位，只會跟著瀏覽器往上自動排版，此時 top, right, bottom, left 和 z-index 屬性無效
呈現方式
- 設置兩個box的position屬性都是static
- 邊框1px紅色
- 粉紅背景
- 高跟寬100px
- 並排對齊
- 其中一個static的箱子加上top、 right…這些移動屬性，觀察是否真的有影響
※這裡用到CSS選擇器跟display屬性呈現，可以參考以下文章：
HTML
<div class=”box-static”>我是static</div>
<div class=”box-static2″>我加移動屬性</div>
CSS
<style>
[class^=box] {
border: 1px solid red;
background: pink;
width: 100px;
height: 100px;
display: inline-block;
}
.box-static {
position: static;
}
.box-static2 {
position: static;
top: 50%;
right: 50%;
}
</style>
程式執行結果
可以看到一樣的設置position:static，加了移動屬性的盒子也沒有移動
relative(相對定位)
position:relative在沒有設置任何移動屬性的情況下，則是跟static，會停留在瀏覽器給他編排的位置，但加入了移動元素，則是會依照「自己原本顯示的位置為基準位置」，且區塊原本的空間仍會保留不會消失。
呈現方式
- 設置三個box的position屬性分別為一個static，兩個relative
- 邊框1px紅色
- 粉紅背景
- 高跟寬100px
- 並排對齊
- 使用一個static來做一個對照，另外設置一個完全沒有移動屬性，以及一個有移動屬性的relative做比較
※這裡用到CSS選擇器跟display屬性呈現，可以參考以下文章：
HTML
<div class=”box-static”>我是static</div>
<div class=”box-relative”>我是relative</div>
<div class=”box-relative2″>我加移動屬性</div>
CSS
<style>
[class^=box] {
border: 1px solid red;
background: pink;
width: 100px;
height: 100px;
display: inline-block;
}
.box-static {
position: static;
}
.box-relative {
position: relative;
}
.box-relative2 {
position: relative;
top: 50px;
right: 50px;
}
</style>
程式執行結果
可以看到設置position:static跟沒有移動的position:relative都沒有移動，而加了移動屬性的relative移動了，且覆蓋在另一個盒子上
fixed(固定定位)
position:fixed是會以整個視窗基準，來進行移動，但他特別在於，即便滑動卷軸，他還是會固定視窗的一個定點，常常被利用於拉回最上層，回首頁等按鈕
呈現方式
- 設置一個box屬性為fixed，並直接加入移動屬性
- 邊框1px綠色
- 亮綠背景
- 高跟寬100px
- 設置right跟bottom都為0%，讓他可以維持在右下角
HTML
<div class=”green-fixed”>我是fixed</div>
CSS
<style>
.green-fixed {
position: fixed;
bottom: 0%;
right: 0%;
width: 100px;
height: 100px;
background: greenyellow;
border: 1px solid green;
}
</style>
程式執行結果
相信一開始點進文章就有注意到，設置完fixed，就會一直維持在整個螢幕的固定位置，這次是設置在螢幕右下角
absolute (絕對定位)
absolute跟fixed有點像，他是跟著某一個基準移動，只是fixed是跟著整個螢幕，而absolute則是以自身階層開始往上算，跟著父層且非static的元素走，若沒有指定基準元素的話，預設是以 body 元素(整個視窗)為基準，是非常好利用在各種相對位置上
常常被使用搭配組合為relative跟absolute，這其中還有進階用法，由於absolute的基準點在盒子的左上角，可以加入transform: translate();來改變中心點，改成正中心為(-50%,-50%)
呈現方式
- 設置兩個box的position屬性分別為一個relative跟一個absolute
- relative邊框1px紅色，粉紅背景
- relative高跟寬300px
- absolute邊框1px藍色，淺藍背景
- absolute高跟寬100px
HTML
<div class=”box-relative”>我是relative
<div class=”box-absolute”>我是absolute</div>
</div>
CSS
<style>
.box-relative {
border: 1px solid red;
background: pink;
width: 300px;
height: 300px;
position: relative;
}
.box-absolute {
border: 1px solid blue;
background: rgb(81, 165, 221);
width: 100px;
height: 100px;
position: absolute;
top: 10%;
left: 10%;
}
</style>
程式執行結果
可以看到absolute會依照父層relative的位置來去移動自身位置