如何使用z-index
CSS中的屬性
在裡面定位柱我提到您可以使用z-index
屬性來控制元素的Z軸定位。
當您有多個相互重疊的元素,並且需要確定哪個元素在用戶附近,並且哪些元素應該隱藏在用戶的後面時,此功能非常有用。
此屬性採用一個數字(不帶小數點),並使用該數字來計算Z軸上哪些元素顯示得更靠近用戶。
z-index值越高,元素越靠近用戶放置。
當確定哪個元素應該可見以及哪個元素應該位於其後時,瀏覽器將對z-index值進行計算。
默認值為auto
,一個特殊的關鍵字。使用auto
,則Z軸順序由頁面中HTML元素的位置確定-最後一個同級項首先出現,因為它的定義是最後一次。
默認情況下,元素具有static
的價值position
財產。在這種情況下,z-index
屬性沒有任何區別-必須將其設置為absolute
,relative
或者fixed
去工作。
例子:
.my-first-div {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 600px;
z-index: 10;
}
.my-second-div {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 500px;
z-index: 20;
}
類的元素.my-second-div
將顯示在它的後面.my-first-div
。
在這裡,我們使用了10和20,但是您可以使用任何數字。負數也是如此。選擇不連續的數字是很常見的,因此您可以將元素放置在中間。如果改用連續數字,則需要重新計算定位中涉及的每個元素的z索引。
免費下載我的CSS手冊
更多CSS教程:
- Flexbox指南
- CSS網格教程
- CSS變量(自定義屬性)
- PostCSS簡介
- CSS保證金屬性
- 如何使用CSS將元素居中
- CSS系統字體
- 如何使用樣式打印HTML
- CSS過渡入門指南
- CSS動畫教程
- CSS簡介
- CSS指南
- 如何使用PurgeCSS和PostCSS設置Tailwind
- 尾風備忘單
- 如何使用CSS連續旋轉圖像
- 使用CSS使表響應
- 如何通過二等分來調試CSS
- CSS選擇器
- CSS級聯
- CSS特異性
- CSS屬性選擇器
- CSS顏色
- CSS單位
- CSS url()
- CSS排版
- CSS Box模型
- CSS位置屬性
- CSS媒體查詢和響應式設計
- CSS功能查詢
- CSS轉換
- 如何使用CSS設置列表樣式
- CSS供應商前綴
- CSS繼承
- CSS偽類
- CSS偽元素
- 用CSS樣式化HTML表
- CSS Display屬性
- CSS calc()函數
- CSS邊框
- 使用@import導入CSS文件
- CSS錯誤處理
- CSS過濾器
- CSS Box大小
- CSS背景
- CSS註釋
- CSS字體
- CSS填充
- CSS float屬性和清除
- CSS規範化
- CSS z-index屬性
- 如何使用CSS禁用文本選擇
- 如何使用CSS將項目放在其容器的底部
- 如何使用CSS反轉顏色
- CSS中的響應式前置標籤
- 自適應YouTube視頻嵌入
- 響應式設計的良好CSS斷點值是多少?
- 如何在Flexbox中對齊中心