z-index 使用 混乱 错误 的原因

最新推荐文章于 2024-02-01 12:27:26 发布
最新推荐文章于 2024-02-01 12:27:26 发布
阅读量1.2k 收藏
点赞数
分类专栏： web杂项 随笔
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suncaishen/article/details/8286387
版权

z-index语义明确，但是它却会因错误的假设而使很多初级的开发人员陷入混乱。

混乱发生的原因是因为Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中。

而元素默认的position static 是不被z-index认可的，作用在这样的dom上也是不起作用的

孙大大
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于z-index 层级显示 ios端不生效问题。
01-03
构建项目的时候由于 采用的 antd of vue ui库 ，里面没有类似点击唤醒遮罩层的组件 ，所以自己手写vue组件进行引入 ，主要用的是 css3 z-index 属性 ，通过z-index 值不同进行层级展示。（ ps ：之前处理过类似需求 ...
DOM层级顺序与z-index
weixin_33895016的博客
04-14 837
前言 DOM层级顺序，大概来说就是DOM节点在z轴方向（垂直于屏幕向外的方向）的显示优先级。为了调整DOM层级顺序，我们想到的往往就是用CSS的z-index属性来控制。虽然看着很简单，但是有时在使用时，我们有时也许会碰到一些一些奇奇怪怪的问题： 为什么有时候将z-index设成很大的值（比如9999），节点依然不能显示在最前面？ z-...
CSS快速入门基础篇（二）
只想和你一起进步
08-27 617
CSS快速入门基础篇
z-index属性
最新发布
2302_78593467的博客
02-01 642
z-index属性的值分为三种：auto（默认值）：与父元素的层级相等，如各级祖先元素均未设置该属性，则类似于0、number：整数数值，在兼容所有浏览器的取值范围是 -2147483584 ~ 2147483584，数值越大，层级越高，数值越小，层级越低、inherit：继承父元素的z-index的属性值。所以例子里的蓝在红的上面，黄在绿的上面。当父元素未设置了z-index属性，子元素的z-index属性与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以元素本身的z-index属性值为准进行对比。
页面中的各个元素使用了transform动画时导致元素层级错乱的解决方案
huanlesyaya的博客
04-22 1624
在设置动画元素父级添加overflow：hidden；利用BFC的原理就可以解决此问题
3D transform变换z-index层级渲染异常
qq_41892236的博客
12-06 762
3D transform变换z-index层级渲染异常 问题描述 上下两个动画，但是层级混乱了，下边的定位元素层级比上面高 解决方法1： <div class="box"> <div class="parent1"> <div class="text-ab"> <div class="children-re">父元素1的被定为</div> <div class="children-ab">父元素1的
transform导致溢出_Transform 引起的 z-index "失效"
weixin_40007515的博客
12-22 488
前言重新学习CSS后的第三天，学习制作阴影的过程中，发现的问题：设置了box-shadow后展现的阴影：添加transform:rotate(10deg);后的效果：查看CodePen例子：阴影效果一脸懵逼！再修改z-index完全没有效果。百度之后，找到了问题的答案，也自己摸索着找到了这个问题的解决办法。下面与大家分享。一、原因给元素设置transform属性会创建一个新的stacking co...
z-index失效问题解析
liona_koukou的博客
08-12 682
问题源自于我在原网页中加入了一个下拉菜单，在原先单独的下拉菜单代码里z-index并没有问题换到了复杂的网页里z-index显示混乱，由此我进行了相关的了解 我们先看一段代码，可以复制下来自己看一下 先给出结果图： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"...
CSS 之 z-index 属性详解
热门推荐
weixin_45092437的博客
08-26 5万+
`z-index`属性是用来设置元素的堆叠顺序或者叫做元素层级，`z-index`的值越大，元素的层级越高。当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面，使层级低的元素的重叠部分被遮盖住。 当父元素设置了`z-index`属性时，子元素的`z-index`属性只与同级元素和父级元素作比较时才有意义，与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以父元素的`z-index`属性值为准进行对比，子元素本身的`z-index`属性值无效。...
CSS z-index 层级关系优先级的概念
12-13
本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念. 目录 顺序规则 定位规则 参与规则 默认值规则 从父规则 层级树规则 参与规则 2 总结 顺序规则 如果不对节点设定...
stylelint-z-index-value-constraint:用于设置z索引的最小和最大约束值的Stylelint规则
05-10
stylelint-z-index-value-constraint 用于设置z索引的最小和最大约束值的Stylelint规则。 这是插件的分支。 安装 npm install stylelint-z-index-value-constraint --save-dev 或者 yarn add stylelint-z-index-...
css设置z-index 失效的解决方法
09-25
设置z-index时必须要固定位置，这样设置它的值时才能奏效（例如 position:absolute;）下面是示例代码，在ff3.5.5和ie5.5~ie8.0RC1中通过，大家可以尝试着不固定其位置试试。
深入剖析z-index属性
01-21
一、z-index七阶层叠顺序表 1.层叠顺序的大小比较： background/border < 负z-index < block块状水平盒子 < float浮动盒子 < inline/inline-block水平盒子 < z-index:auto或者看成z-index:0 /不依赖z...
CSS深入理解z-index（z-index相关知识总结）
AlexGeek
11-30 4773
一、z-index基础内容（入门级掌握） 1.z-index含义： z-index属性指定了元素及其子元素的【z顺序】，而【z顺序】可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大z-index值的元素会覆盖较低的那一个 2.z-index支持的属性值： 3.z-index的特性： 4.特殊点： 如果不考虑CSS3，只有标记了定位元素position的z-index才有作用，但在CSS3中有例外 二、多个定位元素（应用级掌握） 1. 如果定位元素z-in.
z-index详解
qq_39643546的博客
05-12 2万+
z-index就是堆叠上下文，它规定一个元素的堆叠顺序。一般来说，拥有更高堆叠顺序的元素会处于较低堆叠元素的前面。但是，z-index的有一些注意点，接下来一一举例。 <div id="A">A<div id="a">a</div></div> <div id="B">B<div id="b">b</div></div> div A和div B中各有一个div a和div b的子元素 #A,#B { .
解决ActiveX插件Z-Index属性无效问题
csstome
07-31 274
摘要： 在Web开发中我们经常通过z-index设置多个元素之间的层叠关系，这种方式在多数情况下很有效，但是如果遇到有窗体元素时这种方式常常显得无能为力，今天我们就一块看一下如何有效的解决这个问题。 内容： 网页控件分为两大类：有窗体元素和无窗体元素。无窗体元素包括大多数html元素（例如div、table等）、无窗体的ActivX插件、iframe等；有窗体的元素包括&lt;O...
z-index的理解
斜杠青年博客
03-11 5068
z-index 属性是设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序 较低的元素的前面。 1、元素可拥有负的 z-index 属性值。 2、Z-index 仅能在定位元素上奏效（例如 position:absolute;）。 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如 果为正数，则离用户更近，为负数则表示离用户更远。 它可能出现的值： ...
z-index 应用简单总结
会敲代码的男老师的博客
02-03 2417
做过页面布局的同学对z-index属性应该是很熟悉了，z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。 z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。 简单演示 <d
z-index详细使用方法
07-23
要使用 z-index，你需要先确保元素的 position 属性值为 relative、absolute 或 fixed，因为 z-index 只对定位元素有效。 以下是 z-index 的详细使用方法： 1. 指定 z-index 值： 可以通过在 CSS 中为元素设置 z-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值