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. Java知识系统回顾整理01基础05控制流程05 continue

    continue:继续下一次循环 一.continue 题目: 如果是双数,后面的代码不执行,直接进行下一次循环 要求效果: 答案: public class HelloWorld { public ...

  2. Java知识系统回顾整理01基础06数组07数组工具类Arrays

    一.Arrays简介 Arrays是针对数组的工具类,可以进行 排序,查找,复制填充等功能. 大大提高了开发人员的工作效率. 二.Arrays提供的数组复制方法 与使用System.arraycopy ...

  3. day64:nginx模块之限制连接&状态监控&Location/用nginx+php跑项目/扩展应用节点

    目录 1.nginx模块:限制连接 limit_conn 2.nginx模块:状态监控 stub_status 3.nginx模块:Location 4.用nginx+php跑wordpress项目 ...

  4. 白话解析：一致性哈希算法 consistent hashing【转】

    学习一致性哈希算法原理的时候看到博主朱双印的一片文章,看完就懂,大佬! 白话解析:一致性哈希算法 consistent hashing

  5. MeteoInfoLab脚本示例：读取文本文件

    此例中的降水文本文件下载自"中国气象科学数据共享服务网"(http://cdc.nmic.cn/sksj.do?method=ssrjscp),其实是ESRI的文本格点数据格式.对 ...

  6. Jenkins集成appium自动化测试(Windows篇)

    一,引入问题 自动化测试脚本绝大部分用于回归测试,这就需要制定执行策略,如每天.代码更新后.项目上线前定时执行,才能达到最好的效果,这时就需要进行Jenkins集成. 不像web UI自动化测试可以使 ...

  7. 51nod1548 欧姆诺姆和糖果

    思路: 只有兩種糖果,枚舉其中一種糖果的數量就可以得到一個可行解: 但總有一種糖果的數量是較少的,並且該數量小於sqrt(C): 簡單證明: 1.若有任一糖果的質量大於sqrt(C),則必定有一糖果的 ...

  8. Django( 学习第五部 Django之模板语法)

    目录 模板语法 --- 传值 摸板语法 --- 过滤器 模板语法 --- 标签 自定义过滤器.标签.inclusion_tag 模板的继承 模板语法 --- 传值 {{}}       变量相关 {% ...

  9. day05 selenium基本使用

    本文通过举例介绍selenium的基本使用方法,用来爬取京东笔记本电脑的商品信息,包括名称,url,价格,评价信息. from selenium import webdriver # 导入键盘Keys ...

  10. layui 的基本使用介绍

    全局配置 layui.config({ dir: '/res/layui/' //layui.js 所在路径(注意,如果是script单独引入layui.js,无需设定该参数.),一般情况下可以无视 ...