css css position css position 屬性

CSS Position基本觀念

王曉涵 2019/09/02 14:08:10

2 3890

Position 它有一大堆的屬性值，且這些屬性值不但難懂也很難記憶，對於我們要編排較複雜的版面配置時，Position 的基本觀念是非常重要的，接下來將逐一介紹 Position 的五項屬性。

Static 無定位

預設定位，會照著瀏覽器預設的配置自動排版，無法定義 top、left、bottom 與 right 的數值。

<!-- position:static -->
<div class="father-block">
    <div class="p-static no_01">我是Static</div
    <div class="p-static no_02">我是Static</div>
    <div class="p-static no_02">我是Static</div>
</div>

.father-block{
	width: 100%;
	height: 100%;
	background: #32304b;
}

.p-static{
	width: 200px;
	height: 200px;
	position: static;
}

.no_01{
	background: #ec706f;
}

.no_02{
	background: #f6c354;
}

.no_03{
	background: #4aaed3;
}

結果：

Relative 相對定位

Relative 在沒有設定任何屬性的情況下，會和Static的呈現方式一樣。

但他和 Static 不同的地方就在於，他可以透過 top、left、bottom 與 right 的數值來改變他的位置，但無論它在頁面上移動了多少位置，都不會影響其他元素的位置。

<!-- position:relative -->
<div class="father-block">
    <div class="p-relative no_01">我是relative</div>
    <div class="p-relative no_02">我是relative</div>
    <div class="p-relative no_03">我是relative</div>
</div>

.father-block{
    width: 100%;
    height: 100%;
    background: #32304b;
}

.p-relative{
    width: 200px;
    height: 200px;
    position: relative;
}

.no_01{
    background: #ec706f;
}

.no_02{
    background: #f6c354;
    top:100px;
    left:100px;
}

.no_03{
    background: #4aaed3;
}

結果：

＊重要--如上圖，因為我在第二個矩形設定離上跟左各100px，以黃框左上方為基準偏移100px，但視覺上讓你覺得第二個矩形移動位置，但他實際位置還是在原本的位置（黃框），也因為這樣，跟在他後面屬於 static 及 relative 的矩形會依序排列，並不會因為設定 top、left、bottom 與 right 的數值而影響其他矩形的位置。

Fixed 可視區絕對定位

Fixed的元素會以瀏覽器視窗（可視範圍）來定位，意味著即便頁面滾動，他還是會固定在相同位置。Fixed 屬性很特別的的地方是不會像 Relative 一樣會在原圖層留下他的空間，若後面還有Relative屬性的元素，則會黏在前面同是Relative或是Static屬性的元素下方。

<!-- position:fixed -->
<div class="father-block">
    <div class="p-relative no_01">我是relative</div>
    <div class="p-fixed no_02">我是fixed</div>
    <div class="p-relative no_03">我是relative</div>
</div>

.father-block{
    width: 100%;
    height: 100%;
    background: #32304b;
}

.p-fixed{
    width: 200px;
    height: 200px;
    position: fixed;
}

.no_01{
    background: #ec706f;
}

.no_02{
    background: #f6c354;
    top:100px;
    left: 100px;
}

.no_03{
    background: #4aaed3;
}

結果：

＊重要--如上圖，雖然Fixed屬性元素是固定在可視範圍的某個位置，但階層分的很明確哦！排行第幾他的階層就是在第幾層，也就是說，在程式上，若在Fixed屬性後面還有元素，那在呈現的時候，他還是會被後方的元素蓋著，這時，可以使用「z-index」這個屬性，能夠指定他的階層要在哪裡，數字越大越上層，反之則在越下層。

Absolute 絕對定位

Absolute是一個非常特殊的屬性，他和Fixed屬性相似，不一樣的地方在於他的基準點會以屬性是Relative的父層為基準，所以如果他沒有Relative父層的情況下，他會直接找到body（黃框）並以他為基準點。

<!-- position:absolute -->
<div class="father-block">
    <div class="p-relative no_01">我是relative</div>
    <div class="p-absolute no_02">我是absolute</div>
    <div class="p-relative no_03">我是relative</div>
</div>

.father-block{
    width: 100%;
    height: 100%;
    background: #32304b;
}

.p-absolute{
    width: 200px;
    height: 200px;
    position: absolute;
}

.no_01{
    background: #ec706f;
}

.no_02{
    background: #f6c354;
    top:100px;
    left: 100px;
}

.no_03{
    background: #4aaed3;
}

結果：

如果有給 Absolute 元素外加一個 Relative 屬性的父層，則會以父層（黃框）的基準點，如下圖

Sticky 滾動黏滯定位

Sticky英文字面上意思是黏、黏貼，這個元素結合了兩種屬性，分別為Relative以及fixed，非常適用於某些特殊地方。

＊重要--此元素一定要在 top、left、bottom或right 中指定一個屬性，黏性定位才會生效！否則行為就和Relative屬性一樣。

＊重要-- 此元素在沒有跨越特定範圍時為Relative屬性，超出後則會為Fixed屬性，也就是文件若是出現scroll-bar時，他就會由Relative屬性轉換為Fixed屬性。

<div class="father-block">
    <div class="p-sticky no_01">我是sticky，<br>但我什麼都沒有，<br>所以我現在是Relative</div>
    <div class="p-sticky no_02">我是sticky，<br>因為我有top:0，<br>所以我在scrollbar出現時，<br>我會變成fixed，<br>會黏在上方哦~</div>
    <div class="p-sticky no_03">我是sticky，<br>但我什麼都沒有，<br>所以我現在是Relative</div>
    <div class="p-sticky no_01">我是sticky，<br>但我什麼都沒有，<br>所以我現在是Relative</div>
    <div class="p-sticky no_03">我是sticky，<br>但我什麼都沒有，<br>所以我現在是Relative</div>
</div>

.father-block{
    width: 100%;
    height: 100%;
    background: #32304b;
}

.p-sticky{
    width: 200px;
    height: 200px;
    position: sticky;
}

.no_01{
    background: #ec706f;
}

.no_02{
    background: #f6c354;
    top:0px;
}

.no_03{
    background: #4aaed3;
}

結果：