企鵝

脫離文件流 (Normal flow)

這次的任務是一隻向你招手的企鵝，算是複習使用了之前篇數提到的CSS樣式，但在每個元素的排列時會出現一個之前也有遇過的問題，那就是元素的覆蓋，在同一層(兄弟元素)前後順序是怎麼決定的呢？

首先文件流是啥東東？在同一層元素，會按照縱向display:block;或橫向display:inline;一個接著一個排列，或是在彈性盒模型flex box之中沿著主軸與交叉軸依序排列的情況，然而有些屬性可以打破這樣的情況的，這裡用一張圖片與一個字串來舉例：
<img>預設為inline；<p>預設為block

<div class="box">
	<img src="" alt="">
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, ipsa. Esse impedit atque temporibus exercitationem excepturi reprehenderit eius velit, facere aperiam amet numquam quod distinctio fuga iure debitis eligendi dignissimos!</p>
</div>

• float 浮動
  接著我們把這張圖片使用 float: right;，
  我們會注意到他跑到了最右邊，而且文字會再遇到圖片時自動換行，換言之，他一樣佔據著空間。
  

• position 定位
  或著我們透過定位屬性，來改變他的位置，這裡使用絕對定位，將圖片離左邊150px，會發現圖片蓋在文字上面了(將透明度設定為0.8)。

img{
    position: absolute;
 	left: 150px;
    opacity: .8;
}

下篇我們將會介紹Z軸，將網頁脫離平面吧。
下一篇：揮揮手(下)

引用與資源：
freecodecamp
我的企鵝
圖片來源：黑手法鬥董事長