欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

css教程

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

css教程 我的站长站 2020-07-11 共83人阅读

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

相关信息
CSS定位教程 position语法详解
CSS定位教程 position语法详解

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>


相关专题
css
css
2021-09-24 78

css是前端开发中的样式语言,学好CSS可以帮助开发出漂亮的模板,css专题为您整理本站所有css相关信息,包含css模板下载,css使用教程分享和css示例代码....

相关推荐
  • CSS定位
  • CSS语法
  • CSS定位控制上下左右坐标教程

    CSS定位控制上下左右坐标教程 ,需要搭配position使用,position使用方法参考下面教程。[xxid]70,1440[/xxid]本片教程没任何难点,我的站长站就简单点,直接讲解实战方法。实战案列position:absolute;top:100px;bottom:200px;left:300px;right:400px;首先需...

    css教程 258 3年前
  • CSS定位教程 position语法详解
    CSS定位教程 position语法详解

    CSS中的定位,用position语法方法,定位又分为绝对定位、相对定位和固定定位。position语法为CSS2版本,无继承性,默认值为:static。position语法语法:position:static | relative | absolute | fixed代码...

    css教程 87 3年前
  • CSS定位教程 z-index层级语法详解

    在CSS开发中需要某元素覆盖在另一元素的上面,就需要用到z-index语法。z-index语法需要搭配position使用,position语法看下面这篇教程。[xxid]70,1440[/xxid]z-index语法为CSS2版本,无继承性z-index语法z-index: auto | <integer>默认值:auto语法示例z-in...

    css教程 83 3年前
  • CSS * 选择器

    在CSS中选择器中“*”,代表选择全部元素,我们通常用它来处理全部重置样式使用,其他地方很少使用了。语法语义选择全部元素,也可以选择另一个元素内的所有元素兼容性兼容所有浏览器语法代码示例*{padding:0px;margin:0px;}div *{background-color:yellow;...

    css教程 82 3年前
  • CSS文字超出省略号显示

    帝国CMS标题超出省略号显示可以用:<?=esub($bqr[title],32,'...')?> 但有的地方却不是标题,但也想实现文章超出省略号显示。这里给大家介绍的是利用CSS来达到效果。 HTM...

    css教程 335 10年前
  • CSS字间距样式语法教程

    做网站后,为了外观美观,我们可以通过CSS控制字间距。就是使用CSS的letter-spacing属性来控制。CSS写法:letter-spacing:10px;(后面字数是二字之间的间距值)举例:<style>p{letter-spacing:10px;}</style><p>段落文字段落文字段落文字</p>...

    css教程 193 5年前
  • CSS定位教程 position语法详解
    CSS定位教程 position语法详解

    CSS中的定位,用position语法方法,定位又分为绝对定位、相对定位和固定定位。position语法为CSS2版本,无继承性,默认值为:static。position语法语法:position:static | relative | absolute | fixed代码...

    css教程 87 3年前
  • CSS定位教程 z-index层级语法详解

    在CSS开发中需要某元素覆盖在另一元素的上面,就需要用到z-index语法。z-index语法需要搭配position使用,position语法看下面这篇教程。[xxid]70,1440[/xxid]z-index语法为CSS2版本,无继承性z-index语法z-index: auto | <integer>默认值:auto语法示例z-in...

    css教程 83 3年前