定位
區塊內容可以透過定位做進階排版
靜態定位 static
預設定位方式
.pos-static {
position: static;
}
由於是靜態,所以無法自由移動
相對定位 relative
原地浮起,佔據寬高,定位原點為自己
.pos-relative {
position: relative;
}
原則上使用 relative
都是作為下一層的定位原點用,不會拿來做移動使用
絕對定位 absolute
原地浮起,不佔寬高,定位原點為第一個『非靜態』上層
.pos-absolute {
position: absolute;
}
原則上使用 absolute
上一層要設定為 relative
當成定位原點,都沒找到時,使用根元素(html
)
固定定位 fixed
原地浮起,不佔寬高,定位原點為根元素
.pos-fixed {
position: fixed;
}
原則上使用 fixed
都會是第一層元素,因為該方式會抓取根元素(html
),如非在第一層,會使結構錯亂
圖層 z-index
決定浮起區塊的上下位置,類似
PS
中的圖層
.z-99 {
z-index: 99;
}
數字越大,圖層越高
移動
漂浮後,可進行『上』『下』『左』『右』移動
.left-10 {
left: 10px;
}
.right-10 {
right: 10px;
}
.top-10 {
top: 10px;
}
.bottom-10 {
bottom: 10px;
}
畫臉
使用目前所學畫出一張臉