HTML position 示範

日期：
position 常用值：
  • fixed: 固定位置，不會隨著頁面捲動，自己獨立一層
  • relative 相對位置
  • absolute: 絕對位置，會隨著頁面捲動，自己獨立一層

fixed 固定位置

fixed 是固定位置， 在綠色的 div 中使用 position: fixed ，會蓋在紅色的 div 上面，當畫面捲動時會發現綠色的 div 會一直維持在原本的位置 
    
<body style="height: 1500px">

文字
<br/>
文字
<br/>
文字

<div style="width:60px; height: 60px; background: seagreen; position: fixed"></div>
<div style="width:80px; height: 80px; background: firebrick;"></div>

</body>

不加 position: fixed

加上 position: fixed 之後

上面的 div 標記 position: fixed 後，就會在原本應該顯示的位置「懸浮」，其他元素會當這個 div 不存在，填補他的位置。 假設標記 fixed 的 div 使用 right, top, left, bottom 指定位置， div 就會直接移動到整個視窗 (body) 依據 right, top, left, bottom 所指定的位置。

fixed 常用在懸浮動作按鈕(Floating Action Button)，下面是一個簡單的範例： 
    
<div style="width: 20px; height: 20px; right: 20px; bottom: 20px; position: fixed; background: seagreen; border-radius: 50%">
    <div style=" line-height: 20px; text-align: center; color: white;  ">
        +
    </div>
</div>


relative 相對位置

一般情況下直接使用 right, top, left, bottom 調整位置是沒有作用，以下麵的例子使用 top 和 left 並不會讓 div 移動： 
    
文字
<br/>
文字
<br/>
文字

<div style="width:60px; height: 60px; background: seagreen; top: 10px; left: 10px;"></div>
<div style="width:80px; height: 80px; background: firebrick;"></div>

但是只要加上 position:relative ，就可以讓 top: 10px; left: 10px; 起作用，使 div 從原本的位置變成距離上方和左側 10 px，並且 div 還是佔用原本的位置，其他區塊不會擠過去，並且其他區塊會被覆蓋在下方 
    
文字
<br/>
文字
<br/>
文字

<div style="width:60px; height: 60px; background: seagreen; position:relative; top: 10px; left: 10px;"></div>
<div style="width:80px; height: 80px; background: firebrick;"></div>

效果：

absolute 絕對位置

內容會固定在畫面中的指定位置，可以使用 right, top, left, bottom 指定，預設是以最外層 body 的位置做依據，並且會隨著頁面的捲動改變位置 
    
<body style="height: 1500px">

<div style="width:60px; height: 60px; background: seagreen; position:absolute; top: 100px; left: 100px;">
</div>

</body>

不過這裡的「指定位置」有可能不是依照最外層的 body ，只要父元素中有使用 relative, absolute, fixed, sticky 的其中一個，就會以此父元素當作定位的依據，就不會依照 body 來定位了。

例如下面的第一個 div 有使用 position:absolute ，所以第二層的 div 就是以距離第一層上方 100px, 左側 100px 來定位，而不會以最外層的 body 定位 
    
<body style="height: 1500px">

<div style="position: relative">
    <div style="width:60px; height: 60px; background: seagreen; position:absolute; top: 100px; left: 100px;"></div>
</div>

</body>



參考資料：
mdn - position

留言

張貼留言

如果有任何問題、建議、想說的話或文章題目推薦，都歡迎留言或來信: a@ruyut.com