標籤：單位 方便 也會 z-index name bsp 介紹 觀察 back
Div 浮動到另一個div之上:
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>絕對位置相對定位</title> <style> .fj1 { position: absolute; width: 150px; height: 150px; border: 1px solid #000; background: #999; } .zj1 { position: relative; width: 100px; height: 100px; border: 1px solid #F00; background: #FFF; z-index: 1; } </style></head><body> <div> <div class="fj1"> 我在下面 上的發生大幅 上的發生大幅隨碟附送的 </div> <div class="zj1"> 我浮動在上面</div> </div></body></html>
div css z-index層重疊順序
DIV層、span層等html標籤層重疊順序樣式z-index，平時我們使用較少，但也會難免會碰到CSS z-index使用。接下來divcss5介紹z-index從基本屬性到設定對象的層疊順序、重疊順序，從基礎文法到應用案例教程講解學習z-index。
一、z-index文法與結構z-index 跟具體數字
如：
div{z-index:100}
注意：z-index的數值不跟單位。
z-index的數字越高越靠前，並且值必須為整數和正數（正數的整數）。
二、z-index使用條件Z-index在使用絕對位置 position:absolute屬性條件下使用才能使用。通常我們讓不同的對象盒子以不同順序重疊排列，我們就是要z-index樣式屬性。
三、z-index應用案例為了方便觀察z-index樣式屬性，我們設定3個DIV盒子，分別設定不同css背景顏色，設定相同CSS高度、CSS寬度。分別設定背景顏色為黑色、紅色、藍色。CSS width為100px，css height為50px
1、案例css代碼
2、html程式碼片段
css z-index層重疊順序
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
