元素想通過底部、頂部、左側、右側屬性定位是必須先設定position的屬性值
posistion屬性的五個值：static、relative、fixed、absoulte、sticky
- static定位
- HTML的默認定位，正常檔案流物件
- 不受top、bottom、left、right的影響
- relative定位
- 相對定位元素的定位是 相對其正常位置
- 即移動相對定位元素，它原本所占的空間不會改變
- 相對定位元素經常被用來作為定位元素的容器塊
-
h2.pos_left { position:relative; left:-20px; background-color:red; } h2.pos_right { position:relative; left:20px; background-color:blue; }
- fixed定位
- 元素的位置是相對于 瀏覽器窗口 是固定位置
- 與檔案流無關，因此不占據空間
- fixed定位的元素和其他元素重疊
-
div.fixed{ position: fixed; border: 3px solid #73AD21; right:20px; bottom:20px; top:20px; }
注意看代碼的樣式設定，fixed相對于top，與botton同時設定的話，div會被撐開
- absolute定位
-
絕對定位的元素相對于最近的已定位元素，如果元素沒有已定位的父元素，那么他的位置相對于<html>
- 與檔案流無關，不占據空間
- absolute定位的元素和其他元素重疊
-
- sticky定位
- 粘貼定位
- 基于用戶的滾動位置來定位
- 依賴于用戶的滾動，在position：relative與position：fixed定位之間切換
- 在頁面滾動目標區域內它的行為類似于relative，超出目標區域則像fixed，固定在目標位置
- 指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效，否則其行為與相對定位相同，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31393.html
標籤：Html/Css