在CSS开发中需要某元素覆盖在另一元素的上面,就需要用到z-index语法。z-index语法需要搭配position使用,position语法看下面这篇教程。
CSS定位教程 position语法详解
css教程CSS中的定位,用position语法方法,定位又分为绝对定位、相对定位和固定定位。position语法为CSS2版本,无继承性,默认值为:static。position语法语法:position:static | re...
z-index语法为CSS2版本,无继承性
z-index语法
z-index: auto | <integer>
默认值:auto
语法示例
1 2 | z-index : auto ; z-index : 999 ; |
z-index值
auto:默认值。遵从其父对象的定位
<integer>:层级级别。用整数值来定义堆叠级别。可以为负值。
兼容性
全部浏览器都兼容。
实战案列
效果演示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html> < html > < head > < meta charset = "utf-8" /> < title >z-index</ title > < style > .z1,.z2,.z3 { width: 200px; height: 100px; padding: 5px 10px; color: #fff; text-align: right; } .z1 { position: absolute; z-index: 1; background: #000; } .z2 { position: absolute; z-index: 2; top: 30px; left: 30px; background: #C00; } .z3 { position: absolute; z-index: 3; top: 60px; left: 60px; background: #999; } </ style > </ head > < body > < div >z-index:1</ div > < div >z-index:2</ div > < div >z-index:3</ div > </ body > </ html > |