HTML CSS (6) - 相對定位及絕對定位

6-1 相對定位及絕對定位

1. 相對定位position:absolute;
2. 區塊內需寫position:absolute; 再定義位置

• 左上  left:0 top:0
• 左下  left:0 bottom:0
• 右上  right:0 top:0
• 右下  right:0 bottom:0

.content{
 background: black;
 width:200px;
 height:200px;
 position:absolute; //絕對定位
 left: 0; //左下角
 bottom: 0;
}
.content2{
 background: red;
 width: 500px;
 height:200px;
 position:absolute; //絕對定位
 right:0; //右上角
 top:0;
}

• 黑區塊和紅區塊不會理會原本的配置，會被置放在絕對位置

• 絕對定位position:relative;

1. 父區塊必須寫position:relative;
2. 父節點找不到relative則會以整個瀏覽器為主(效果如position:absolute;)
3. 需要跑的區塊(此例子是圖片)必須寫position: absolute; 再定義位置

.header{
 padding:20px;
 height: 200px;
 background: pink;
 border: 5px solid black;
 position:relative;
}
.header img{
 position: absolute;
 bottom: 0;
 right:0;
}

• 小兔兔會在粉紅區塊(黑框框)內跑
• 將img位置設定為負數（bottom: -20px;）則結果如下，跑出黑框框

• 區別：
• float: 元素並排使用
• position: absolute/relative使用在元素重疊

6-2 z-index搭配相對及絕對定位

- 假設有兩張圖片，小玉的class="yu"，野口的class="keke"，css如下

.keke{
 position:absolute;
 top:0;
 left:0;
}
.yu{
 position:absolute;
 top:0;
 left:0;
}

則顯示如下

驚！野口不見了！

原因html內先寫野口的img，再寫小玉的img，這樣會把野口的img改掉。

如果想要讓野口的img在上面，在重疊的情況下可以使用z-index

• z-index數字可自訂(設定太大不好維護)
• 越大元素則會在越上面（圖層概念，數字越高越上面）
• 兩個圖層z-index相等，則會和default一樣(後寫的蓋掉先寫的)

.keke{
 position:absolute;
 top:0;
 left:0;
 z-index: 8;
}
.yu{
 position:absolute;
 top:0;
 left:0;
 z-index:7;
}

6-3 ul li設計產品列表

• 主題式列表使用ul li，而不用div

步驟

1. 使用css reset
2. 新增ul li區塊
3. 一個.wrap區塊包住所有ul li，且設定此寬度，並使用margin auto
4. li下加上h2，設置文字
5. 可使用width: 50%;語法縮減比例
6. 設定li寬度，使其限制圖片及文字寬度
7. 設定文字padding/font-weight: bold;/color: pink; 
8. span金額文字設定顏色大小 (注意text-align只能放在div區塊元素內，不要放在span內)
9. 加上左上角的div文字(次回預告)加入相對position relative(父區塊), absolute(子區塊)
10. div加上padding

參考網頁

https://codepen.io/chuchu1313/pen/WXqamd

6-4 postion fixed

• Emmet小技巧ul>li{$}*300
• 使用position: fixed;固定位置不受滑動影響

img{
 position: fixed;
 bottom: 10px;
 right: 10px;
}

可以固定兔兔