1. 寬度／高度 的 % 相對於【上一層同方向】的寬度／高度，但上一層必須有固定高度喔

上一層為 <body> 寬度為1000px, 高度為2000px

這個 <div> 的寬度設定為 50% => 1000*50% = 500px
這個 <div> 的高度設定為 5% => 2000*5% = 100px

2. margin 或 padding 的 % 相對於【上一層的寬度】

不論是margin或padding，寬度的%相對上層寬度的%，高度的%也是相對上層「寬度」的%
上一層為 <body> 寬度為1000px, 高度為2000px

這個 <div> 的 margin 及 padding 左右設定為 3% => 1000*3% = 30px
這個 <div> 的 margin 及 padding 上下設定為 3% => 1000*3% = 30px

3. transform 各種變形的 % 是相對於元素本身

這個 width 設定為 600px，height 設定為 100px
這個 transform: scale 設定為 1.5 => 寬度 600*1.5 = 900px 高度 100*1.5 = 150px
這個 transform: translateY 設定為 50% => 100*50% = 50px

4. position定位 相對於【上一層同方向】的寬度／高度
position 的 left, right 設定 % 時，相對於上一層的寬度
position 的 top, bottom 設定 % 時，相對於上一層的高度
這個 <div> 的 position 設定為 absolute，相對到 body 的右下角

上一層為 <body> 寬度為1000px, 高度為2000px
這個 <div> 的 position 設定為 absolute

這個 <div> 的 left 設定為 5% => 1000*5% = 50px
這個 <div> 的 bottom 設定為 5% => 2000*5% = 100px