Bootstrap-絕對定位失靈了?

以下建議有position一些小基礎和Bootstrap小基礎會比較清楚哦


position屬性是用於指定一個元素的定位方式，它含有的屬性值有:static(預設值)、absolute(絕對)、relative(相對)、fixed(固定)

設定完屬性值後，就要設定top、right、bottom和left決定該元素的最終位置



上述有些了解後，接著我們實作在Bootstrap上

以下範例設定為在大螢幕時背景圖片在左邊，文字在右邊，當螢幕變小後，文字會和背景圖片重疊，所以這邊為了不讓背景圖片佔空間可以和文字重疊，所以把背景圖片設定為絕對定位

See the Pen
Bs #position by yennnnyu (@yennnnn)
on CodePen.

這時大家有發覺到奇怪現象嗎，為什麼已經設定絕對定位了，但是圖片卻在下面呢?不是應該浮在最上面嗎?

這邊就要請大家打開F12，會看到我們的開發人員工具，接著移到我們寫的程式，會發現原來col其實也有設定相對位置，導致背景圖片明明有設定絕對定位了卻沒有浮在最上面(當元素都有設定位置的話，最上面先寫的程式會在下面，一層一層堆疊哦)

所以假如說想讓以上面範例，若想讓背景圖片移到上面，只要設定z-index就可以囉!大家也可以試試看把上面範例的z-index註解移除掉看看效果

關於z-index若有些不懂得也可以到我另一篇看看哦: )