css css position css position 屬性

CSS Position基本觀念

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

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 不同的地方就在於,他可以透過 topleftbottom 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 的矩形會依序排列,並不會因為設定 topleftbottom 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,非常適用於某些特殊地方。

*重要--此元素一定要在 topleftbottomright 中指定一個屬性,黏性定位才會生效!否則行為就和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;
}

結果:

*重要--當捲動視窗時,第二個矩形撞到上面時就會黏在視窗的上方!大家實作時就能看到很明顯的效果喔!

 

 

 

以上介紹了五種 Position 的基本概念,接下來我用圖解的方式說明五個屬性的差異。

 

圖解Position,讓你一次看懂五個參數的差異!

 

 

 

 

參考來源:

關於position 屬性 http://zh-tw.learnlayout.com/position.html

  CSS position 属性 http://www.w3school.com.cn/cssref/pr_class_position.asp

CSS Position 位置 https://www.1keydata.com/css-tutorial/tw/position.php

10步掌握CSS定位: position static relative absolute float http://www.see-design.com.tw/i/css_position.html

position屬性relativeabsolutestatic fixed 解析 https://blog.camel2243.com/2016/11/16/css-position-屬性relative、absolute、static-及-fixed-解析/

Position https://developer.mozilla.org/en-US/docs/Web/CSS/position

CSS排版觀念:Position http://jaceju.net/2005-04-29-css-position/

CSS position 位置屬性 http://www.webtech.tw/info.php?tid=CSS_position_位置屬性

前端新手村Position 定位 https://ithelp.ithome.com.tw/articles/10194075

使用position:sticky 实现粘性布局 http://www.cnblogs.com/coco1s/p/6402723.html

 

 

王曉涵