在实际开发中,div+css经常会碰到层级的问题

其中有个很头痛的就是z-index控制层级时,老是发现z-index不起作用

老杨依据自己的经验,总结出以下步骤:

1、判断被覆盖的层(想要置顶的层)的postion是否也为relative或者absolute

2、如果1成立,则判断是否此层的z-index比误覆盖的层的z-index数值大

3、如果2成立,判断是否此层的父级元素比误覆盖的层的z-index数值大

4、如果3成立,判断是否此层的父级元素比误覆盖的层的父级层的z-index数值大

到此为止,99%的该问题会得到解决!

内容不多,可是会非常实用!

解决position:relative情况下,z-index无效的方法的更多相关文章

  1. JanusGraph :Cassandra作为存储后端的情况下,JanusGraph的安装方法

    Cassandra作为存储后端的情况下,JanusGraph的安装方法 Cassandra作为存储后端的情况下,JanusGraph的安装分为四种方式. 分别是: 1.本地服务器模式(这里的服务器指的 ...

  2. 使用position:relative制作下边框下的小三角

    在制作tab选项卡的时候,有时会有下边框,且下边框下另一个头向下的小三角,这全然能够用css来实现,而不必使用背景图片. 由于使用背景图片时会有一个问题,选项卡内容字数不同.导致使用背景图片时无法控制 ...

  3. 解决xShell4某些情况下按删除键会输出^H的问题

    当我们用Xshell登录进入linux后,在普通模式下,对输入进行删除等操作没有问题. 而在执行中,按delete,backspace键时会产生^H等乱码问题. 这是由于编码不匹配的问题. 解决方法: ...

  4. 解决ie7,ie8下a链接无效问题

    .person a{ display: block; position: absolute; width: 109px; height: 33px; bottom: 19px; right: 40px ...

  5. 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  6. Sql Server 如何解决多并发情况下,出现的多个相同ID数据

    在数据库中单独创建一张表,保存当前存储状态,“存储过程”  设置访问条件root初始值为“0” 如果root值不为0的时候就不可访问并进行相关操作. 在事务执行前将root值设置为1,事务结束后将ro ...

  7. 不使用jquery情况下循环添加绑定事件方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Centos7多内核情况下修改默认启动内核方法

    1.1  进入grub.cfg配置文件存放目录/boot/grub2/并备份grub.cfg配置文件 [root@linux-node1 ~]# cd /boot/grub2/ [root@linux ...

  9. easyui日期在未加载easyui-lang-zh_CN.js出现英文的情况下加载中文的方法

    我们有时候在操作easyui的时候本来是加载了easyui-lang-zh_CN.js中文文件包,但是还是出现了英文.使得我们不得埋怨这框架咋这么不好用,其实我们仔细看看这个中文包就会发现里面很多都是 ...

随机推荐

  1. Ant 命令总结

    1 Ant是什么? Apache Ant 是一个基于 Java的生成工具.生成工具在软件开发中用来将源代码和其他输入文件转换为可执行文件的形式(也有可能转换为可安装的产品映像形式).随着应用程序的生成 ...

  2. PHP学习笔记 - 入门篇(3)

    PHP学习笔记 - 入门篇(3) 常量 什么是常量 什么是常量?常量可以理解为值不变的量(如圆周率):或者是常量值被定义后,在脚本的其他任何地方都不可以被改变.PHP中的常量分为自定义常量和系统常量 ...

  3. NodeJS文件读取:感恩常在--抓把糖果,愉悦客人

    通过上一篇文章“NodeJS服务器:一行代码 = 一个的HTTP服务器”,我们已经开启了NodeJS之旅,开发了一个监听在8000端口的HTTP服务器,虽然功能很简单,但是,已经让我们感受到用Node ...

  4. 用css3做标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  6. SQL基础知识

    一.检索前5行数据 1.SQL Server和Access中使用SELECT时,可以使用TOP关键字来限制最多返回多少行 SELECT TOP 5 prod_name FROM Products; 2 ...

  7. 快速搭建MongoDB分布式集群

    目录Outline 1. prerequisites 2. steps to follow3. configuring the cluster4. a little test to see 1. Pr ...

  8. Poj OpenJudge 百练 1573 Robot Motion

    1.Link: http://poj.org/problem?id=1573 http://bailian.openjudge.cn/practice/1573/ 2.Content: Robot M ...

  9. zabbix3.0.3 设置邮件报警

    在zabbix3.0.3 设置报警这里卡了两天.终于解决了,这里我使用的mailx来作为发送邮件的客户端 1.设置mailx发信账号 yum -y install mailx ln -s /bin/m ...

  10. 怎么在spring官网上下载spring的jar包, 源代码和文档?

    现在 http://repo.spring.io/release/org/springframework/spring/第一种,简单粗暴直接 1 http://repo.springsource.or ...