position 與z-index的愛恨情仇
position: static
static定位是HTML元素的默認值，即沒有定位，元素出現在正常的流中
position:fixed
fixed定位是指元素的位置相對於瀏覽器窗口是固定位置，即使窗口是滾動的它也不會滾動，且fixed定位使元素的位置與文檔流無關，因此不占據空間，且它會和其他元素發生重疊。
position:relative定位
相對定位元素的定位是相對它自己的正常位置的定位。移動後對於移動前：如果值為負數，則直接換成整數；如果值為整數，則直接改變相對方向。
position:absolute
絕對定位的元素相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麽它的位置相對於<html>。
重疊的元素--z-index屬性
首先聲明：z-index只能在position屬性值為relative或absolute或fixed的元素上有效。
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。這個的前提是元素得有堆疊，堆疊即位置的覆蓋，否則沒有意義，這就有了最開始的聲明；這個聲明是z-index屬性存在的前提。
例一 未設置任何堆疊效果，position屬性，這就是按照標簽順序正常顯示的效果
例二 通過position，left，top設置使子元素產生堆疊
例三 在例二的基礎上設置z-index 使本在下面的son1 出現在上方 即值大的元素發生重疊時會在值小的元素上面
例四 父元素z-indedx均大於子元素，結果沒有變!!!!! 是否 說明父元素和子元素不能做z-index的比較
例五 當父元素無z-index屬性，子元素該屬性為負時，出現父元素顯示在最上面的效果，
說明在父元素和子元素之間還是可以作比較的！！！只是需要我們把子元素的z-index值設為負數且不設置父元素的z-index屬性。
父元素之間呢？
例六 實現堆疊
例七 改變parent1的z-index設為20，原本在下面的粉色塊出現在上面，這就是明顯的拼爹啊，
例八 有沒有可能將兩個子元素顯示到同一層，即彼此的的父元素不遮擋另一個子元素？
根據例五，有沒有可能將兩個子元素都隱藏呢？
參考博客：https://i.cnblogs.com/EditPosts.aspx?opt=1
position 與z-index的愛恨情仇