html 測試 上入 下出

html 測試 單入 單出

html 測試 左右 各一 測試

html 測試 左入右出

尾部連結 hbbb(xx)

onload onscroll onresize

2018年3月4日 星期日

DIV CSS z-index

DIV CSS z-index

做出區塊或圖片的堆疊效果,必須搭配上 position 語法來設定區塊的位置,才能做出疊在一起的效果,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
, , , , ,

沒有留言:

張貼留言