position的四大特性

今天要來跟大家介紹position、z-index、placement這幾個CSS



position分別有4種參數分別為static、reative、absolute、fixed
z-index就把他想像成PhotoShop的圖層就可以了，數字越大越前面(數字由使用者自己決定，你高興打1.2.3.4.5或者995.996.997.998.999都可以)
placement就是定位用的，可以將你想要的DIV移到妳想去的地方

---

首先，我們先找一張圖和一篇文章分別建立這樣的div
圖片及文章都由你自己決定，文字最好是可以多到有捲軸會比較容易看得到效果哦

之後，就開始分別測試這4個屬性分別會有什麼樣子的效果(由於拍出來的樣子效果不盡理想，這裡就得由你自己親手去嘗試囉)

position:absolute
外面的DIV內容會被裡面的DIV內容給蓋住
z-index(O)
placement(O)

position:fixed
裡面的DIV會跟著捲軸跑(這還滿常在某些網站上的廣告看到的手法)
z-index(O)
placement(O)

position:static
其實這就是系統的預設值，應該不需要我多講什麼了吧?
z-index(X)
placement(O)

position:reative
z-index(X)
placement(O)

---

如果要讓兩個DIV對齊+重疊的話
外面那層設position:reative
裡面那層設position:absolute + placement(定位)

PS.缺點就是內容會重疊

再搭配hover設定z-index的話也有另外一種效果哦~