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。

<style type="text/css"> #div1 ,#div2 ,#div3 ,#div4 { z-index: 0; text-align:center; width: 200px; height:60px; position: fixed; } #div1:after,#div2:after,#div3:after,#div4:after {content: " z-index=0"} #div1:hover:after,#div2:hover:after,#div3:hover:after,#div4:hover:after {content: " z-index=1"} #div1:hover,#div2:hover,#div3:hover,#div4:hover{z-index: 1} </style> <div id="div1" style="top:30px;left:30px;background-color: #ffd382;" >div 1 </div> <div id="div2" style="top:70px;left:70px;background-color: #ff3392;">div 2 </div> <div id="div3" style="top:110px;left:110px;background-color: #ff6602;">div 3 </div> <div id="div4" style="top:150px;left:150px;background-color: #ffd333;">div 4 </div>

00

, , , , ,

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。

<style type="text/css">#div1 ,#div2 ,#div3 ,#div4 { z-index: 0; text-align:center; width: 200px; height:60px; position: fixed; } #div1:after,#div2:after,#div3:after,#div4:after {content: " z-index=0"} #div1:hover:after,#div2:hover:after,#div3:hover:after,#div4:hover:after {content: " z-index=1"} #div1:hover,#div2:hover,#div3:hover,#div4:hover{z-index: 1} </style> <div id="div1" style="top:30px;left:30px;background-color: #ffd382;" >div 1 </div><div id="div2" style="top:70px;left:70px;background-color: #ff3392;">div 2 </div><div id="div3" style="top:110px;left:110px;background-color: #ff6602;">div 3 </div><div id="div4" style="top:150px;left:150px;background-color: #ffd333;">div 4 </div>

00

#HTML 堆疊效果#CSS z-index