CSS定位教程 z-index层级语法详解

在CSS开发中需要某元素覆盖在另一元素的上面,就需要用到z-index语法。z-index语法需要搭配position使用,position语法看下面这篇教程。
相关信息

[时间:08-28]    [浏览:]    [放入收藏夹]    [查看详情]

在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

语法示例

z-index: auto;
z-index: 999;

z-index值

auto:默认值。遵从其父对象的定位

<integer>:层级级别。用整数值来定义堆叠级别。可以为负值。

兼容性

全部浏览器都兼容。

实战案列

CSS定位教程 z-index层级语法详解

效果演示

<!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>


  本文转载自:精准像素:11px.cn ,感谢作者分享实用知识


标签: