`

为什么css中设置z-index不起作用?

 
阅读更多

很多朋友比较疑惑z-index这个样式。其实只要先知道以下2点就可以很容易的理解了——

 要想给元素设置z-index样式,必须先让它变成定位元素,再通俗一点说,就是要给元素设置一个postion:relative(定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed。)样式。 

不要给想控制“上、下”的元素设置z-index,而是对他们的父容器设置z-index样式。 

详细介绍

   语法:

  z-index : auto | number

  参数:

  auto :  遵从其父对象的定位

  number :  无单位的整数值。可为负数

  说明:

  检索或设置对象的层叠顺序。

  如两个绝对定位对象的此属性具有同样的值,那么将依据它们在HTML文档中声明的顺序层叠

  对应的脚本特性为zIndex。

z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而 z-index 值为负数的对象在其之下。

 

分享到:
评论

相关推荐

    css里的z-index的使用

    css里的z-index的使用

    CSS3关于z-index不生效问题的解决

    最近写CSS3和js结合,遇到了很多次z-index不生效的情况: 1.在用z-index的时候,该元素没有定位(static定位除外) 2.在有定位的情况下,该元素的z-index没有生效,是因为该元素的子元素后来居上,盖住了该元素,...

    CSS z-index 层级关系优先级的概念

    CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也...

    css中z-index属性实例分析

    Css中z-index的实例分折.可以作为CSS Z-INDEX研究的实例。很小很简洁。

    关于z-index 层级显示 ios端不生效问题。

    项目构建 webpack + vue + vue-router + vueX + axios + antd of vue 起因 构建项目的时候由于 采用的 antd of vue ui库 ,里面没有类似点击唤醒遮罩...出现弹窗的时候,滑动底部z-index 属性不起作用。 更令人无语的

    css3的transform造成z-index无效解决方案

    我想锁表头及锁定列。...这个道理想想也明白,Transform 就是一个影子,假像,所以它不考虑z-index.那怎么解决呢? 再百度,以及去stackoverflow看文章,也没办法。既然不能控制“new stacking contex

    css设置z-index 失效的解决方法

    设置z-index时必须要固定位置,这样设置它的值时才能奏效(例如 position:absolute;)下面是示例代码,在ff3.5.5和ie5.5~ie8.0RC1中通过,大家可以尝试着不固定其位置试试。

    CSS--z-index详解1

    抱歉,服务器出了点问题... - 简书屏幕快照 -- 上午...png因为div A的z-index值没有设置,默认就是auto,不会处于堆叠上下中,所以就不会

    CSS 定位之 z-index 问题分析

    position值为非static时,如果不设置z-index属性,IE6/7下z-index默认为0,而IE8及以上浏览器z-index为auto,且zindex:auto的元素不参与堆叠优先级比较。 ff/chrome z-index IE6/7 IE8/9 不设置 0 auto au

    CSS中的z-index属性基本使用教程

    需要注意的是 z-index 虽然很给力,却只能应用于定位元素(即设置了 position 属性为非 static 值),其它情况下,z-index 将被忽略。 对于定位元素而言,z-index 意味着: 确定该元素在当前层叠上下文中的层叠级别...

    css z-index 在IE中的迷惑

    对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而z-index 值为负数的对象在其之下。 注意:这个属性不会作用于窗口控件,如selct 对象。在IE 5.5+中,iframe 对象开始支持此属性。而在之前的...

    stylelint-z-index-value-constraint:用于设置z索引的最小和最大约束值的Stylelint规则

    stylelint-z-index-value-constraint 用于设置z索引的最小和最大约束值的Stylelint规则。 这是插件的分支。 安装 npm install stylelint-z-index-value-constraint --save-dev 或者 yarn add stylelint-z-index-...

    css z-index 最大值

    z-index最大值: IE FireFox Safari的z-index最大值是2147483647 。 Opera的最大值是2147483584.。 IE Safari Opera在超过其最大值时按最大值处理。...0时层不显示 在z-index<-2147483648时溢出实际数字正负不定

    CSS教程:网页布局定位及z-index解释

    NULL 博文链接:https://xiaomogu.iteye.com/blog/1311531

    妙用z-index让一个div显示在最前面

    position定位如果有重叠的时候,z-index愈大,就显示在最上面 此时我们就可以设置div的css样式z-index:99999,那么该div就显示在最前面

    学习CSS网页制作:z-index在IE中的迷惑.pdf

    学习CSS网页制作:z-index在IE中的迷惑.pdf

    解决CSS中子元素z-index与父元素兄弟节点的层级问题

    1.问题的出现 写了一个平铺的列表,其中有些列表项具有hover出现的弹出框。希望达成的目标是弹出框展现时,要把列表项内容遮盖住,以保证弹出框内容优先展示。 元素的结构大致如下: 列表项1 ...

    div层调整z-index属性无效原因分析及解决方法

    在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的position属性要是relative,absolute或是fixed。 1.第一种情况(z-index无论设置多高都不起作用情况): 这种情况...

Global site tag (gtag.js) - Google Analytics