z-index属性详解

一.定义和用法

  • z-index属性指定一个元素的堆叠顺序,也就是z轴
  • position属性定义的是x轴和y轴
  • z-index属性必须应用到position: relative|absolute|fixed的元素上,否则属性不会生效
  • 应用到float属性的元素上也不会生效

二.代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            width: 100px;

            height: 100px;

        }

        .one {

            background-color: gray;

            /* .one进行绝对定位后, 灰色会盖住绿色 */

            position: absolute;

            /* 如果要绿色层级高的话,使用z-index属性大于灰色层级即可 */

            z-index: -1;

        }

        .two {

            background-color: green;

        }

    </style>

    <title>Document</title>

</head>

<body>

    <div class="one"></div>

    <div class="two"></div>

</body>

</html>

三.效果图

z-index属性详解的更多相关文章

  1. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

  2. Angular 6.X CLI(Angular.json) 属性详解

    Angular CLI(Angular.json) 属性详解 简介 angular cli 是angular commond line interface的缩写,意为angular的命令行接口.在an ...

  3. jQuery Event.which 属性详解

    jQuery Event.which 属性详解 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮. 对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮. which属性对 ...

  4. MWPhotoBrowser 属性详解 和代理解释

    --------0.MWPhoto简单属性解释---------------- MWPhoto *photo = [MWPhoto photoWithURL:[NSURL URLWithString: ...

  5. Flash播放控件属性详解

    Flash 播放控件属性详解 一.属性篇 1.AlignMode(读写)  语法:AlignMode As Long  说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...

  6. Ext.tree.TreePanel 属性详解

    Ext.tree.TreePanel 属性详解 2013-06-09 11:02:47|  分类: ExtJs|举报|字号 订阅  原文地址:http://blog.163.com/zzf_fly/b ...

  7. css 14-CSS3属性详解：Web字体

    14-CSS3属性详解:Web字体 #前言 开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体.从此,把特殊字体处理成图片的方式便成为了过去. ...

  8. css 12-CSS3属性详解：动画详解

    12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...

  9. android:exported 属性详解

    属性详解 标签: android 2015-06-11 17:47 27940人阅读 评论(7) 收藏 举报 分类: Android(95) 项目点滴(25) 昨天在用360扫描应用漏洞时,扫描结果, ...

随机推荐

  1. Arduino 串行外设接口(SPI)

    时间有限有其他项目工作在忙,感觉作者写的不错,就先记录下来了. 这几天用SPI--Arduino 在供应商的电子原件上游离游走,重要的是可以读写了, 下面是在查资料看到的一篇不错的文章关于用Ardui ...

  2. uint16_t

    转自:https://blog.csdn.net/kiddy19850221/article/details/6655066 uint8_t / uint16_t / uint32_t /uint64 ...

  3. 【数量技术宅|金融数据分析系列分享】为什么中证500（IC）是最适合长期做多的指数

    更多精彩内容,欢迎关注公众号:数量技术宅.探讨数据分析.量化投资问题,请加技术宅微信:sljsz01 投资股票指数相比个股的优势 我们在投资股票的时候,如果持仓集中在一只或者有限几只股票上,恰好不幸遇 ...

  4. randomatic

    下载 randomaticrandomatic 使用简单的字符序列生成指定长度的随机字符串.原generate-password. 请考虑下面这个项目的作者,Jon Schlinkert主演的,考虑项 ...

  5. 手把手教你AspNetCore WebApi：认证与授权

    前言 这几天小明又有烦恼了,之前给小红的接口没有做认证授权,直接裸奔在线上,被马老板发现后狠狠的骂了一顿,赶紧让小明把授权加上.赶紧Baidu一下,发现大家都在用JWT认证授权,这个倒是挺适合自己的. ...

  6. RHSA-2017:2473-重要: 内核 安全和BUG修复更新（需要重启、存在EXP、本地提权）

    [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 修复命令: 使用root账号登陆She ...

  7. 手工实现docker的vxlan

    前几天了解了一下docker overlay的原理,然后一直想验证一下自己的理解是否正确,今天模仿docker手工搭建了一个overlay网络.先上拓扑图,其实和上次画的基本一样.我下面提到的另一台机 ...

  8. Linux系统安装JDK1.8

    2020最新Linux系统发行版ContOS7演示安装JDK. 为防止操作权限不足,建议切换root用户,当然如果你对Linux命令熟悉,能够自主完成权限更新操作,可以不考虑此推荐. 更多命令学习推荐 ...

  9. pytest文档53-命令行实时输出错误信息(pytest-instafail)

    前言 pytest 运行全部用例的时候,在控制台会先显示用例的运行结果(.或F), 用例全部运行完成后最后把报错信息全部一起抛出到控制台. 这样我们每次都需要等用例运行结束,才知道为什么报错,不方便实 ...

  10. Centos7 安装python环境

    保留python2 找到python所在位置,把python指向python2.7备份 [root@sun /usr/bin]# cd ~ [root@sun ~]# whereis python p ...