z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

Z-index 仅能在定位元素上奏效,z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

浏览器支持:

所有主流浏览器都支持 z-index 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

z-index可等的值:

z-index:auto  默认,堆叠顺序与父元素相等

z-index:number ;  设置元素的堆叠顺序,自己设置

z-index:inherit;规定应该从父元素继承z-index属性的值

元素可拥有负的 z-index 属性值。

该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

更加深入体会z-index的用法请跳转到:https://www.cnblogs.com/Lorrained/p/13904167.html(第37行代码)

CSS中z-index的属性与使用的更多相关文章

  1. CSS中具有继承性的属性:

    CSS中具有继承性的属性:   color:#eee font: font-style font-variant: font-weight:bold font-size font-family: fo ...

  2. 妙味css3课程---1-1、css中自定义属性可以用属性选择器么

    妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...

  3. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  4. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  5. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  6. CSS中默认被继承的属性

    在CSS中,所有属性都可以被继承,只需要显式的设置属性值为inherit即可.如果不设置该属性,CSS大部分属性默认不会从父元素继承而是设置初始值(initial value),但是有一部分属性,默认 ...

  7. css 中可以继承的属性

    CSS中可以和不可以继承的属性一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到 ...

  8. css中可以继承的属性

    声明 : 本文源于https://www.cnblogs.com/thislbq/p/5882105.html CSS中可以和不可以继承的属性   一.无继承性的属性 1.display:规定元素应该 ...

  9. CSS中px和em属性的特点与区别

    详解px和em的特点和区别象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用,px和em之间究竟有什么区别和特点呢?◆px像素(Pixel),相对长度单位.像素px是相对 ...

  10. [转]总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

随机推荐

  1. HIVE- 各年逐月累加函数

    select year_flag,month_flag,field,SUM(field) OVER (PARTITION BY year_flag ORDER BY month_flag)from t ...

  2. OL3-Cesium 二三维鼠标事件统一处理

    like the github issue: https://github.com/openlayers/ol3-cesium/issues/344#issuecomment-214098148 th ...

  3. hutool调用第三方接口上传文件和下载文件

    1.上传文件接口例子(本地接口) 2.第三方接口 3.调用第三方接口下载文件 4.第三方接口 5.多个文件生成压缩文件

  4. nodejs,阿里云手机号一键登录

    const Core = require('@alicloud/pop-core'); const accessKeyId = "xxxx" const accessSecret ...

  5. Didn't find class "org.apache.http.ProtocolVersion

    使用volley时报"Didn't find class "org.apache.http.ProtocolVersion" 今天在运行签名好的apk 在android9 ...

  6. Neural Network模型复杂度之Residual Block - Python实现

    背景介绍 Neural Network之模型复杂度主要取决于优化参数个数与参数变化范围. 优化参数个数可手动调节, 参数变化范围可通过正则化技术加以限制. 本文从优化参数个数出发, 以Residual ...

  7. ChainofResponsibility Pattern

    责任链模式: 参考:https://www.runoob.com/design-pattern/chain-of-responsibility-pattern.html 避免请求发送者与接收者耦合在一 ...

  8. css 卡片hover效果

    .card { height: 430px; width: 100%; background:#ffffff; border:1px solid #eaeefb; border-radius:5px; ...

  9. [canvas]ncaught TypeError: Cannot read properties of null (reading 'getContext')

    相信你和我一样是直接复制大佬的js代码(笑) ------------ 主要问题在于:js先加载完了,html才加载,导致js获取不了html的对象 解决办法: 把  <head />  ...

  10. 记录POI导入时单元格下拉框两种实现方式(excel数据有效性)

    如果下拉选项字符少于225 使用方式1 public static HSSFSheet setHSSFValidation(HSSFSheet sheet, String[] textlist, in ...