html 測試 上入 下出

html 測試 左右 各一 測試

html 測試 單入 單出

html 測試 左入右出

class="ot"









尾部連結 hbbb(xx)

2018年3月4日 星期日

DIV CSS z-index

DIV CSS z-index

z-index 屬性設定了一個定位元素及其後代元素或 flex 項目的 z-order。 當元素之間重疊的時候, z-index 較大的元素會覆蓋較小的元素在上層進行顯示。
HTML 區塊 div1 先寫, 而 div2 div3 div4 寫在 div1 後面, 因此 div2 重疊在 div1 上方。
要改變 div1 及 div2 重疊次序,我們可以在 div 加入 z-index 元素, 那個 z-index 的值越大重疊越靠高位置,如下列 div1 z-index 為1,div2 z-index 為1,div1 顯示在 div2 上方。
在 style CSS 設定 #div1:after,#div2:after,#div3:after,#div4:after {content: " z-index=0"},在 div 內文字後加入 z-index=0。

再 style CSS 設定 #div1:hover:after,#div2:hover:after,#div3:hover:after,#div4:hover:after{content: " z-index=1"}, 當 滑鼠 移到 div 上 div 內文字後加入 z-index=1。

再 style CSS 設定 #div1:hover,#div2:hover,#div3:hover,#div4:hover{z-index: 1},當 滑鼠 移到 div 上 div 設定 z-index=1。

00
#HTML 堆疊效果#CSS z-index

沒有留言:

張貼留言