---
tags: FD前端學習
---

# EP12__位置position與 parallax視差捲動

{%hackmd @Limo470/image-scroll %}

https://cdnjs.com/libraries/font-awesome/5.15.4

## 如何改變標籤顯示位置

活潑的畫面常有互相套疊的變換，創造出前後空間感，像是
為商品加上特價標籤的狀況，這便需要藉助CSS來移動網頁標籤，
以下是常見的設定方式，其中 *`負值`* 則是反方向。如向上推-10px=上移10px
https://www.cathaybk.com.tw/cathaybk


<b>

|類型|起始|說明|補充|
|-|-|-|-|
|✋🏻margin|本身外推|外距外推|`margin-left:-10px;`|
||
|🦠transform|左上移動|視覺變形x軸,y軸平移|`transform:translate(0, -10px);`|
|🗺position|左上移動|依照定位點移動|`position:relative;`|
|||上下左右，四方移動|`left:-10px;`|
|||可設定Z軸前後關聯|`z-index:999;`|

</b>

**`position`** VS *`transform`*

position:正常情況下可以使用幾乎所有瀏覽器都支持，transform:則適合用於動畫效果

{
    position:relative;
    top:10px;
}

<b>

至少須設定position:relative;方可使用

|值|說明|補充|
|-|-|-|
|☝️top|向參考點，最上方距離多少|`top:0;`
|👇bottom|向參考點，最下方距離多少|`bottom:0;`
|👈left|向參考點，最左方距離多少|`left:0;`
|👉right|向參考點，最右方距離多少|`right:0;`
|||`left:0;right:0;`類似width:100%;
|👊🏻z-index|控制標籤互相堆疊前後關係|Z軸方向`z-index:9;` `z-index:-3;`|

</b>

### 🏻z-index

1. 預設後方標籤會遮蔽前方標籤
2. 數字大在上，數字小在下
3. 當數值為負數，不顯示在畫面上

<bdi>

&nbsp;

&nbsp;

&nbsp;正面(用戶)看到的

&nbsp;側面看到的(Z軸)



&nbsp;藍(z-index:2;)

&nbsp;紅、白(z-index:0;) 黃(z-index:-3;)

</bdi>

<iframe height="500" style="width: 100%;" scrolling="no" title="move your tag" src="https://codepen.io/limo147/embed/gOdXVBW?default-tab=view%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/limo147/pen/gOdXVBW">
move your tag</a> by limo147 (<a href="https://codepen.io/limo147">@limo147</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## position 補充
https://ithelp.ithome.com.tw/articles/10253500

<b>

|-|值|說明|補充|
|-|-|-|-|
|預設定位|
|😐|static|靜態定位，預設狀態|不進行特殊定位||
||
|四大定位|
|🚩|relative|相對定位，自訂為參考點|自身不變，可與absolute搭配||
|👑|absolute|絕對定位，向最近參考點定位|與父層做參考，否則參考視窗||
||
|🧲|sticky|黏貼定位，滑動後，黏貼於頂度|常見於網頁左/右側選單||
|🦅|fixed|固定定位，永久置於視窗頂部|多用於網頁上方頁首||
||

</b>

### relative
「relative 相對定位」的效果是將設定的物件，將其參考空間參考自身原始的資料流位置，
且此種定位值並不會將物件獨立一層，搭配其它 CSS 屬性，
如 top 、 right 、 bottom 、 left可做到「顯示位置的偏移」。

### absolute
多用來作為圖片的標籤(排名、推薦等)

「absolute 絕對定位」的效果是將設定的物件，將其參考空間設定為

1. 階層離自身最近，且具備定位設定的父層空間
2. 視窗空間座位參考空間

父層空間只要俱備四大定位(relative)，就可被絕對定位物件做為參考空間。


<iframe height="500" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/limo147/embed/RwYxwWe?default-tab=view%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/limo147/pen/RwYxwWe">
Untitled</a> by limo147 (<a href="https://codepen.io/limo147">@limo147</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

>補充資料

### 圖片套用背景圖片 顯示特殊區塊效果

object-fit:cover;
object-position:top;

<bdi>

`💙圖片，顯示特殊區塊`

`💚背景圖片，顯示特殊區塊`

//img圖片
    
<img src="..." alt="..."> 
    
img{
  object-fit:cover;
  object-position:top;
    
  width:100%;
  height:400px;
  max-width:500px;
  min-width:200px;
    
    
}

//div背景圖片
    
<div>...</div>    

div{
  background-size:cover;
  background-position:top;
    
  width:100%;
  height:400px;
  max-width:500px;
  min-width:200px;
    
  background-image:url(...);
}

</bdi>

**Position 的用途**
在網頁中` position` 的用途是設定「**`物件定位時所要的參考對像`**」，預設狀態下物件的位置是依據資料流來做排列，也就是跟隨資料做排列，如果對物件添加了不同的 position 之後，就能改變物件所參考的空間對像，進而改變物件的位置。

## parallax視差捲動

`background-attachment: fixed;`

<iframe height="500" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/andy6804tw/embed/eVpxLE?default-tab=view%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/andy6804tw/pen/eVpxLE">
Untitled</a> by Yi Lin Tsai (<a href="https://codepen.io/andy6804tw">@andy6804tw</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

https://mir-s3-cdn-cf.behance.net/project_modules/1400_opt_1/c458d278733175.5cadae96964f6.png



https://www.behance.net/gallery/89702807/Objective

<!--  -->

<!--  -->