定位

區塊內容可以透過定位做進階排版

靜態定位 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),如非在第一層,會使結構錯亂

demo

圖層 z-index

決定浮起區塊的上下位置,類似 PS 中的圖層

.z-99 {
    z-index: 99;
}

數字越大,圖層越高

demo

移動

漂浮後,可進行『上』『下』『左』『右』移動

.left-10 {
    left: 10px;
}
.right-10 {
    right: 10px;
}
.top-10 {
    top: 10px;
}
.bottom-10 {
    bottom: 10px;
}

non relative parent

relative parent

畫臉

使用目前所學畫出一張臉

demo