深入理解CSS定位中的堆叠z-index

前面的话

  对于所有定位,最后都不免遇到两个元素试图放在同一位置上的情况。显然,其中一个必须盖住另一个。但,如何控制哪个元素放在上层,这就引入了属性z-index

 

定义

  利用z-index,可以改变元素相互覆盖的顺序。这个属性的名字由坐标系统得来,其中从左向右是x轴,从上到下是y轴。从屏幕到用户是z轴。在这个坐标系中,较高z-index值的元素比较低z-index值的元素离用户更近,这会导致较高z-index值的元素覆盖其他元素,这也称为堆叠或叠放

z-index

  值: <integer> | auto | inherit

  初始值: auto

  应用于: 定位元素

  继承性: 无

  [注意]z-index应用于定位元素是CSS2的规范,到了CSS3标准,z-index的应用范围扩大了不少

  [注意]所有整数都可以作为z-index的值,包括负数。如果为元素指定一个负z-index值,会将其移到离读者更远的位置,会移到叠放栈的更低层

 

堆叠规则

  对于CSS2.1来说,页面元素的堆叠规则如下图所示:

定位元素的堆叠规则

  [1]对于定位元素(position不是static的元素)来说,不设置z-index或z-index相同时,后面元素覆盖前面元素

  [2]对于处于同一堆叠上下文中的同一层次的元素来说,默认z-index较大值覆盖z-index较小值

style="width: 100%; height: 361px;" src="https://demo.xiaohuochai.site/css/zindex/z1.html" frameborder="0" width="320" height="240">

堆叠上下文

  一旦为一个元素指定了z-index值(不是auto),该元素会建立自己的局部堆叠上下文。这意味着,元素的所有后代相对于该祖先元素都有其自己的叠放顺序

  [注意]auto值指当前堆叠上下文中生成的栈层次与其父框的层次相同,这个框不会建立新的局部叠放上下文。z-index:auto与z-index:0的值相等,但z-index:0会建立新的局部堆叠上下文

默认样式

<div class="box1">
<ul class="list1">
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
<li id="four">4</li>
</ul>
<ul class="list2">
<li id="five">5</li>
<li id="six">6</li>
</ul>    
</div>
<div class="box2">
<div id="seven">7</div>
<div id="eight">8</div>
</div>
.box1{z-index: 1;}
.box2{z-index: auto;}
.list1{z-index: 2;}
.list2{z-index: 1;}
#one{z-index: -1;}
#two{z-index: 1;}
#three{z-index: 0;}
#four{z-index: auto;}
#five{z-index: 2;}
#six{z-index: 1;}
#seven{z-index: 2;}
#eight{z-index: -1;}
//堆叠顺序
.box1                  1
.box1 .list1           1,2
.box1 .list1 #one      1,2,-1
.box1 .list1 #two      1,2,1
.box1 .list1 #three    1,2,0
.box1 .list1 #four     1,2,auto
.box1 .list2           1,1
.box1 .list2 #five     1,1,2
.box1 .list2 #six      1,1,1
.box2                  auto
.box2 #seven           auto,2
.box2 #eight           auto,-1

  [注意]auto,2和auto,-1相当于2和-1,因为auto代表未产生堆叠上下文。则#seven和#eight相当于和它们的父级.box2以及.box1处于同一层次

style="width: 100%; height: 498px;" src="https://demo.xiaohuochai.site/css/zindex/z2.html" frameborder="0" width="320" height="240">

  元素不会叠放在其堆叠上下文(即定位父级z-index为数字值)的背景之下,但可以叠放在其内容之下;当元素没有处于堆叠上下文中,元素不会叠放在<body>元素的背景之下,但可以叠放在其内容之下

style="width: 100%; height: 393px;" src="https://demo.xiaohuochai.site/css/zindex/z3.html" frameborder="0" width="320" height="240">

兼容

【1】IE7-浏览器z-index的默认值是0

  一般地,定位元素的z-index的默认值是auto,而IE7-浏览器定位元素的z-index的默认值是0,二者的区别于IE7-浏览器的定位元素会自动生成堆叠上下文

div{
position: absolute;
border: 1px solid black;
}    
.div1{
width: 300px;
height: 100px;
background-color: pink;
z-index: 1;
}
.div2{
background-color: lightgreen;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
}
.in2{
width: 100px;
height: 150px;
background-color: lightblue;
z-index: 2;
border: none;
}
<div class="div1"></div>
<div class="div2">
<div class="in2"></div>
</div>

  一般地,div1的堆叠顺序为1;div2的堆叠顺序为auto;in2的堆叠顺序为auto,2相当于2。所以覆盖层次为in2 覆盖 div1 覆盖 div2。但在IE7-浏览器中,div1的堆叠顺序为1;div2的堆叠顺序为0;in2的堆叠顺序为0,2。所以覆盖层次为div1 覆盖 in2 覆盖 div2

  左边为其他浏览器图示,右边为IE7-浏览器图示

 

【2】IE6-浏览器关于z-index的一个怪异bug

  当元素本身浮动且不是定位元素(position不是static),元素父级是relative,则在IE6-浏览器在无论该元素的父级的z-index如何设置都不起作用

.div1{
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
background-color: pink;
}
.box{
position: relative;
z-index:2;
}
.div2{
float: left;
width: 150px;
height: 50px;
background-color: lightgreen;
}
<div class="div1"></div>
<div class="box">
<div class="div2"></div>    
</div>

  左边是IE6浏览器结果,右边是其他浏览器结果

解决方法

  [1]元素去除浮动

  [2]父级元素的相对定位改成绝对定位

  [3]元素添加position属性(static除外)

  以上三个方法任一方法都可以,其实就是在破坏bug成立的条件

 

【3】IE6-浏览器下select的z-index无效而遮挡div

  IE6-浏览器下select设置z-index无效,且默认会堆叠在div上

.box{
left: 30px;
z-index:2;
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
}
select{
width: 100px;
position: absolute;
z-index:1;
}
<div class="box"></div>
<select name="select" id="slt1">
<option value="1">第一项</option>
<option value="2">第二项</option>
</select>

  左边是IE6浏览器结果,右边是其他浏览器结果

解决方法

  在IE6-浏览器中,虽然div无法覆盖select,但是iframe可以select。所以可以设置一个与div宽高相同的iframe。让div覆盖iframe,iframe覆盖select,最终达到select被div覆盖的效果

iframe{
left: 30px;
position: absolute;
width: 100px;
height: 100px;
z-index: 2;
}
<iframe src="#" frameborder="0"></iframe>
<div class="box"></div>
<select name="select" id="slt1">
<option value="1">第一项</option>
<option value="2">第二项</option>
</select>

 

CSS3

  CSS3的出现对过去的很多规则发出了挑战。对层叠上下文z-index的影响更加显著,主要包括以下8个属性

  1、z-index值不为auto的flex项(父元素display:flex | inline-flex)

  2、元素的透明度opacity值不等于1

  3、元素的变形transform不是none

  4、元素的mix-blend-mode值不是normal

  5、元素的filter值不是none

  6、元素的isolation值是isolate

  7、will-change指定的属性值为上面的任意一个

  8、元素的-webkit-overflow-scrolling设置为touch

  9、元素的mask属性不是none

  设置以上9个属性的任意一个,都和设置absolute类似,层叠上下文z-index会生效。下面以opacity透明度为例,进行说明

style="width: 100%; height: 468px;" src="https://demo.xiaohuochai.site/css/zindex/z4.html" frameborder="0" width="320" height="240">


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362929.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

初识服务发现及Consul框架的简单使用

初识服务发现及Consul框架的简单使用 1.什么是服务发现&#xff1f; 服务发现组件记录了&#xff08;大规模&#xff09;分布式系统中所有服务的信息&#xff0c;人们或者其它服务可以据此找到这些服务。 DNS 就是一个简单的例子。 当然&#xff0c;复杂系统的服务发现组件要提…

进程间的通信方式

5&#xff0c;进程间通信方式____ &#xff0c;____ &#xff0c;____ &#xff0c;____ &#xff0c;____ &#xff0c;_____。 管道 消息队列 共享内存 信号 信号量 套接字 管道通信&#xff1a;实质是管道文件操作&#xff0c;分为有名管道和 无名管道两种。 无名管…

JavaFX技巧4:总结

在为JavaFX开发自定义控件时&#xff0c;我强烈建议您遵循JavaFX核心控件的脚步&#xff0c;并使控件的API尽可能最终化&#xff0c;并在所有方法声明的前面放置“ final”关键字。 例 在FlexGanttFX中&#xff0c;我有很多看起来像这样的代码&#xff1a; public final Acti…

CSS光标cursor

前面的话 在浏览器中&#xff0c;光标对于提供交互反馈很有用。通过在不同的场景中改变光标&#xff0c;就能赋予其不同的含义 定义 cursor光标 值: [<uri>,]*[auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize …

jquery获取value值时将数字型字符串前面的0自动截取处理方法

<li class"cwhite" value"02" id"02" οnclick"getQuestionList(02,this);">数学</li> var subjectCode $(obj).find(".bd.subject li[classcwhite active]").val(); 这种方法会把02前面的0自动截取 var subje…

《Effective C#》Item 21:用委托实现回调

委托属于C#中的新名词&#xff0c;它的应用也非常广泛&#xff0c;例如事件就是委托最简单而又直接的例子。 那么首先说说什么是委托&#xff0c;其实委托在用过C或者C的人看来就是函数指针&#xff0c;不过使用C#的大多数人都没有用过这两门语言&#xff0c;因此对委托的理解不…

人生建议

1、不要在最幸福的时候许诺。 2、不要在暴怒的时候回信息。 3、不要在悲伤的时候做决定。 4、不要在迷茫的时候选择轻松的道路。 5、不要在自己做决定后怪别人。 6、不要把现在的幸福当作理所当然。 转载于:https://www.cnblogs.com/tarenacode/p/11460619.html

Spring MVC中的验证组

可以通过groups属性将Bean验证中的验证约束添加到一个或多个组。 这使您可以限制在验证期间应用的约束集。 在某些小组应先于其他小组进行验证&#xff08;例如在向导中&#xff09;的情况下&#xff0c;这可能很方便。 从Spring MVC 3.1开始&#xff0c;可以通过org.springfra…

表单美化

前面的话 由于一些系统原生的表单控件在各个浏览器中显示效果不一致&#xff0c;且无法设置某些关键CSS样式&#xff0c;为了保证表单在各浏览器中的兼容性&#xff0c;表单美化就是不得不做的一件事了 单选按钮 【实现效果】 style"width: 100%; height: 120px;" s…

【Python3.6】python打包成exe

D:\python_test>pip3 install pyinstaller…………D:\python_test>pyinstaller -F -w ui.py 84 INFO: PyInstaller: 3.3.1 85 INFO: Python: 3.6.4 88 INFO: Platform: Windows-10-10.0.15063-SP0 93 INFO: wrote D:\python_test\ui.spec 94 INFO: UPX is not available.…

算法题解:连续子数组的最大和及其下标

题目 输入一个整型数组&#xff0c;数组里有正数也有负数。数组中一个或连续的多个整数组成一个子数组。求所有子数组的和的最大值。要求时间复杂度为O(n)。 举例 输入&#xff1a;2, -3, 4, 5, -9 输出&#xff1a;9 和最大的连续子数组是 {4, 5}&#xff0c;结果就是9。 思路…

简而言之,JUnit:Hello World

对于Java世界中的开发人员而言&#xff0c; JUnit似乎是最受欢迎的测试工具 。 因此&#xff0c;难怪就此主题已经写了一些好书 。 但是&#xff0c;通过以顾问为生&#xff0c;我仍然经常遇到程序员&#xff0c;他们至多对工具及其正确用法都不了解。 因此&#xff0c;我想到…

jQuery获取所有父级元素及同级元素及子元素的方法

jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id").closest() 获取其最近的祖先元素&#xff0c;依次上溯 2.获取同级元素 $("#…

考取RHCE认证的历程,总结的经验

昨天去考试的&#xff0c;今天下午结果出来了&#xff0c;达到了我的预期。成功的获取了RHCE认证&#xff0c;以后我也是有证的人咯~&#xff0c;开个玩笑。 其实去年的时候我就曾经想要去考取的&#xff0c;我原来一直以为考取RHCE认证时考题都是英文的呢&#xff1f;因为我英…

Python萌新笔记

Mychael上了大学&#xff0c;对Python产生了浓厚的兴趣&#xff0c;便开始了Python的学习 学习的时候&#xff0c;感觉Python确实比以往学的C表达简洁很多&#xff0c;而又不失强大 以后的学习笔记就记在这啦 变量 Python中的变量无需声明&#xff0c;其类别也只有具体赋值的时…

明天一定要记得放一个硬币在口袋

以前上班总是从陆家嘴站下来&#xff0c;然后走到公司。现在改从东昌路站下。地铁陆家嘴站附近&#xff0c;现在正忙着收尾世博前的那些形象工程。满地的泥土、污水&#xff1b;空气中充斥着机器的轰鸣声、粉尘、烟雾、臭气。更让人难受的还有哪些长着&#xff0c;遭受了地震蹂…

命令设计模式的应用

嗨&#xff0c;您好&#xff01; 今天&#xff0c;我将与您分享一种非常出色的编程设计模式。 它有很多用法&#xff0c;是我的最爱之一。 编程设计模式命令具有多种用例。 在这篇文章中&#xff0c;我们将看到如何实现现实世界中的某些东西。 我们将使用电子汽车钥匙来打开&…

代码块,-- 循环结构--字符串的格式化--字符串相关函数功能

### -代码块 以冒号作为开始,用缩进来划分相同的作用域,称之为代码块,代码块是一个整体,一个文件也可称代码块 作用域&#xff1a;作用的区域 ### -流程控制 (1)流程控制的定义 (2)流程控制的结构 ### -分支结构 关键字:if elif else (1)分支结构的种类 (2)分支结构的特点 ###…

adodb.stream对象的方法/属性

cancel 方法 使用方法如下 object.cancel 说明&#xff1a;取消执行挂起的异步 execute 或 open 方法的调用。 close 方法 使用方法如下 object.close &#xff1a;关闭对像 copyto 方法 使用方法如下 object.copyto(deststream,[charnumber]) 说明&#xff1a;将对像的数据复制…

MongoDB非关系型数据库开发手册

一&#xff1a;NoSql数据库 什么是NoSQL? NoSQL&#xff0c;指的是非关系型的数据库。NoSQL有时也称作Not Only SQL的缩写&#xff0c;是对不同于传统的关系型数据库的数据库管理系统的统称。 NoSQL用于超大规模数据的存储。&#xff08;例如谷歌或Facebook每天为他们的用户收…