关于不小心弄错z-index的错误

最新推荐文章于 2023-02-22 11:46:53 发布
最新推荐文章于 2023-02-22 11:46:53 发布
阅读量259 收藏
点赞数
分类专栏： css 文章标签： 关于不小心弄错z-index的错误
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44568194/article/details/86541511
版权

关于不小心弄错z-index的错误

开发工具与关键技术：DW、关于不小心弄错z-index的错误

作者：周泉辛

撰写时间：2019年1月18日

作为刚学不久的菜鸟常常一个疏忽把代码打错，导致一些地方报错，但是去检查又好像没有什么问题，觉得是这样打的呀，怎么会有报错呢？

找来找去才发现原来是那种可以让人忽略的，或者和自己记忆有出入的地方。

例如下面的z-index:
在这里插入图片描述

这个看起来好像没有毛病，也没有见他报错，但是呢，他在HTML里面却应用不了！
在这里插入图片描述

一开始我也以为是其他什么原因，也弄了很久，最后发现是我多打了px上去，正确的打法是不带单位的

在这里插入图片描述

在这里插入图片描述

真的是一不小心就毁全局，大家可不要学我这样搞了个大乌龙。

uniapp - 解决高德地图获取定位当前位置出现getLocation:fail [geolocation:7]错误KEY鉴权失败，uniApp安卓app打包/云打包后高德地图调用定位API报错解决
王佳斌
10-21 6241
uni-app，高德地图，getLocation:fail [geolocation:7]，uniapp打包安卓高德地图出错，UNI-APP获取当前位置，出现getLocation:fail [geolocation:7]错误的问题解决，uniapp打包后无法获取定位的问题，uniapp云打包中出现getLocation:fail [geolocation:7]KEY错误，KEY鉴权失败，检查key绑定的sha1值与apk签名sha1值是否对应，证书没问题，打包后定位失效原因，都已经配置好了还是不行，定位A
【C#进阶3-4】C#设计模式
CSDN博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
05-19 6786
一、目录 文章目录一、目录二、设计原则三、创建型模式3.1、单例模式（Singleton Pattern）3.2、工厂方法模式（Factory Pattern）3.3、抽象工厂模式（Abstract Pattern）3.4、建造者模式（Builder Pattern）3.5、原型模式（Prototype Pattern）四、结构性模式4.1、适配器模式（Adapter Pattern）4.2、桥接模式（Bridge Pattern）4.3、装饰者模式（Decorator Pattern）4.4、组合模式（C
z-index无法工作的4个原因及如何解决
o_heart
05-21 1304
z-index是一个CSS属性，允许您将图层中的元素放在彼此的顶部。不幸的是，z-index是那些并不总是以直观方式表现的属性之一。 一开始似乎很简单，更高的z指数表示该元素将位于具有较低z-index数的元素之上。 但是有一些额外的规则会使事情变得更加复杂。 并且你不能总是通过将z-index设置为999999来解决问题！
zIndex的几个小小的问题(一)
飘零雾雨的专栏
09-29 2029
zIndex在实际应用中很是实用。不过也有些问题需要注意，很容易把头都搞大。当然，其实说什么都是没用滴，先用zIndex做个效果看看再说，首先得知道它都可以胜任哪些东东，这是比较重要的。比如要做一个下面的扑克牌堆叠的效果，这是非常简单的。扑克牌图片网上随便找就可以了，或者直接拿下面的这几张。效果如下图：［演示地址：http://www.doyoe.com/model/xht
z-index 使用 混乱 错误 的原因
孙健的专栏
12-12 1283
z-index语义明确，但是它却会因错误的假设而使很多初级的开发人员陷入混乱。 混乱发生的原因是因为Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中。 而元素默认的position static 是不被z-index认可的，作用在这样的dom上也是不起作用的
z-index的用法
dreamcarp的专栏
06-23 485
需要当前层比其他层高的时候可以用z-index.用的时候注意，z-index对普通文档流中的元素不起作用，必须设置定位。 可以设置： { position:relative; z-index:1; } 或 { position:absolute; z-index:1; } 或 { position:fixed; z-index:1 }
z-index无效及解决方法
Dayer的博客
07-09 1万+
z-index无效的情况，一共有三种：1、父标签 position属性为relative；2、问题标签无position属性（不包括static）；3、问题标签含有浮动(float)属性。解决办法有是三个：1、position:relative改为position:absolute；2、浮动元素添加position属性（如relative，absolute等）；3、去除浮动。...
你刚才的回答弄错了，我是要图片衬在其他元素之下，而不是覆盖在其他元素之上。这样的话z-index值应该怎样设置？
最新发布
09-27
如果要让图片衬在其他元素之下而不覆盖它们，你需要将图片的`z-index`设置得比容器或其他元素的`z-index`低。在这种情况下，正确的做法是： 1. 将图片元素的`z-index`设置为负数，比如`z-index: -1`，这样它会自动...
1Z0-043复习笔记
Daniel's Blog
12-17 384
1、在有数据库结构变化，恢复DB,需要先重建CONTROLFILE，编辑后再restore 2、checkpoint将所有db_buffer_cache中的数据写回到datafile中，不管数据是否是commit与否 3、view定义存储在data dictionary中，expdp时including content指导出view定义和基础表中的数据 4、非本机的oem需要用到AGENT组
(十一)MySQL日志篇之undo-log、redo-log、bin-log.....傻傻分不清！
BASK2311的博客
10-26 1507
叨叨絮絮下来，就大致将MySQL中的一些常见、较为重要的日志讲明白啦，其实重点搞清楚undo-log：主要用于实现事务ACID原则中的原子性和MVCC机制。redo-log：主要用于实现事务原则中的持久性，确保事务提交后就不会丢失。bin-log：主要结合redo-log实现事务原则中的一致性，确保事务提交前后，数据的一致。对于其他几类日志，在本篇中也仅讲明了大概，毕竟后面的章节中会再出现，而对于上述三大日志也就基本上不会提到了，因此剖析的较为全面，那么咱们下篇见~，下面准备讲：《MySQL。
z-index层重叠事件顺序以及解决办法
热门推荐
希望能找到你的答案
07-08 15万+
在做项目时，常常会用到弹出一个层，然后在这个层上进行操作，操作完成时就关闭弹出层，或者点击别的地方进行关闭层。 通常都会在div样式中设置z-index的值，比如父层设置z-index:100，子层就设置大于100，起到弹出父层时，子层能够显示。 例如（简单写一下）： 关闭弹出层：$("#div1").hide(); //需要引用jquery.js文件 我们也可以点击父层其余
z-index无效
weixin_30823833的博客
11-02 436
1、要想给元素设置z-index样式，必须先让它变成定位元素，说的明白一点，就是要给元素设置一个postion:relative(定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed)样式。 2、不要给想控制“上、下”的元素设置z-index，而是对他们的父容器设置z-index样式。 看懂了以上两点，我们就明白了如何...
【the import cannot be resolved问题可以通过以下方法解决】
lianwen90的博客
02-22 9983
解决导入项目 the import can not be resolved的问题
DW前端代码汇总
HCTLTCT的博客
04-29 1万+
DW前端代码汇总 ==============================前端代码============================ ------------------------------------*标签*--------------------------------- <button></button>--按钮标签 <ul></ul>---段落标签 <u></u>--下划线 <link r...
Safari 定位fixed下，z-index层级失效问题
Jensonhui's Blog
09-20 4977
在Safari浏览器下，此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari浏览器，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的3D视角进行渲染。 解决方案： 方法1： 父级...
定位z-index详解
唐伯虎点蚊香的博客
05-14 1463
设置z-index 的时候会和父级的层级对比。如果父级的层级不相同，则各自子集的层级不能对比。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;定位和居中&lt;/title&gt; &lt;meta name="description&quo
Z-Library书目索引：压缩包子文件的详细分析
资源摘要信息:"Z-Library是一个全球最大的免费电子书共享图书馆，它提供给全球读者以电子版形式的书籍资源。Z-Library的书目索引主要列出了这个图书馆中的所有书籍资源，方便用户检索与查找。在这个书目索引中，通常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值