CSS-合理使用z-index控制盒子视轴高度,解决z-index失效
关于z-index我们的共识
共识一
首先,我们都同意,z-index对于普通盒子是无效的,这里的“普通盒子”是除了下文我会提到的“神奇盒子”外的所有盒子,至于什么是“神奇盒子”请慢慢看。
对于普通盒子,不管z-index值如何,写在html文档中后面的块会在写在前面的盒子上面,float的盒子会在没有float的盒子上面,文字等inline、inline-block元素会在block元素的上面。
以下所有代码示例请查看github查看完整源码
<div class="first">first div</div><div class="second">second div</div><div class="inline">inline div</div><div class="float_first">first float div</div><div class="float_second">second float div</div>
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
div{width: 100px;height: 200px;border: 2px solid silver;}.first{background-color: blue;}.second{background-color: red;}.inline{display: inline-block;background-color: pink;}.float_first{float: left;background-color: green;}.float_second{float: left;background-color: orange;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
x轴、y轴位置我是在chrome中用margin-top负值和margin-left正值调的,结果如下:
不管我如何给first div加z-index,哪怕给个9999这么大值,second div还是在其上面,其他块同理,z-index不能影响上图视轴(z轴)顺序,html标签顺序会影响first div、second div及first float div、second float div视轴高低。所以说,z-index不是给这些盒子使用的。
共识二
对于受z-index控制的,姑且称之为“神奇”的盒子(其实就是很多博客说的 stacking context,层叠上下文 ),z-index值越大其视轴越高,离用户越近,最大的就在最上面,会遮挡其他神奇盒子。
这点不用我举例吧,很多人都习惯写z-index:900
这种样式,就是想让这个盒子在最上面,当又出现一个盒子,就不得不写z-index:901
这种让人迷糊的样式。
两个共识引出的一个问题
了解以上两个共识以后,你有没有想过这个问题,那么z-index 负值 与 普通盒子们谁在上面呢?
神奇盒子(层叠上下文)与普通盒子的视轴排列
我首先想介绍下层叠上下文,也就是什么样的盒子是神奇的盒子。
具有哪些样式的盒子会成为神奇盒子(层叠上下文)
首先,我们最常见的定位不是static的盒子,是神奇盒子,其他创建神奇盒子的方式我引用的博客的总结,如下:
- z-index值不为auto的flex项(父元素display:flex|inline-flex).
- 元素的opacity值不是1.
- 元素的transform值不是none.
- 元素mix-blend-mode值不是normal.
- 元素的filter值不是none.
- 元素的isolation值是isolate.
- will-change指定的属性值为上面任意一个。
- 元素的-webkit-overflow-scrolling设为touch.
关于以上总结,我测试过 opacity和transform ,但引用博客博主靠谱,大家可以亲测下。其实,其他我没测也是因为不常用,大家有个印象就ok。
神奇盒子与普通盒子视轴高度
话不多说,上代码。
<div class="block">block box</div><div class="absolute">absolute box</div><div class="negative">negative box</div><div class="positive">positive box</div><div class="float">float box</div>
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
html{padding: 200px;}div{width: 200px;height: 100px;border: 5px solid silver;}.block{background-color: green;}.absolute{position: absolute;background-color: blue;margin-top: -60px;margin-left: 40px;}.negative{position: absolute;background-color: red;z-index: -1;margin-top: -140px;margin-left: -20px;}.positive{position: absolute;background-color: purple;z-index: 1;margin-top: -40px;margin-left: 60px;}.float{float: left;background-color: pink;margin-top: -80px;margin-left: 20px;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
结果:
结论: html -> z-index负值神奇盒子(绝对定位) -> 块状盒子 -> float 盒子 -> z-index auto或者0的神奇盒子(绝对定位) -> z-index正值神奇盒子(绝对定位),视轴越来越高。PS,inline或者inline-block盒子高于float盒子,但低于auto z-index神奇盒子,就是位于粉色和蓝色盒子之间。
关于这个结论,你可以这么考虑,在普通盒子视轴排列的基础上,神奇盒子可以根据z-index值自由穿梭于普通盒子上或下。
以上都是兄弟盒子之间的关系,父子盒子关系很容易理解,子盒子会高于父盒子,不然我们写的子块不都被父块覆盖了。如果我想知道子盒子与其父盒子的兄弟盒子的关系呢(子盒子与其伯伯盒子的关系)?
当讨论嵌套盒子视轴关系时需要注意的问题
这里我只想提醒大家,如果父盒子是神奇盒子,子盒子与其伯伯盒子(子盒子的父盒子的兄弟盒子)的视轴关系是由父盒子与这个伯伯盒子关系决定的。比如:
<div class="father">fahter box <div class="son">son box</div></div><div class="brother">brother box</div>
- 1
- 2
- 1
- 2
div{width: 200px;height: 100px;border: 5px solid silver;position: absolute;}.father{background-color: red;z-index: 0;}.brother{background-color: blue;z-index: 1;}.son{background-color: yellow;z-index: 999;width: 100px;height: 50px;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
位置请用margin或top、left自己在chrome里调下,你会看到如下图:
没错,son的z-index为999,但是居然不在最上面,最上面的是 z-index为1的div。这个时候请不要大叫 z-index 失效,这是正常表现。因为son的父盒子father是神奇盒子,它的z-index为0,所以son与brother的关系由father与brother的关系决定,显然father在下么,那son就得在下,不管你给它设多大的z-index。
一道关于z-index的面试题
最后,既然你已经耐心读到这了,我就给你出道题考考你。仅使用css如何让上图中的brother在son与father中间?也就是,仅使用css如何让一个盒子位于它的兄弟盒子与兄弟盒子的子盒子中间。
答案
div{
width: 200px;
height: 100px;
border: 5px solid silver;}
.father{
background-color: red;
}
.brother{
background-color: blue;
z-index: 1;
position: absolute;
}
.son{
background-color: yellow;
z-index: 999;
width: 100px;
height: 50px;
position: absolute;
}
CSS-合理使用z-index控制盒子视轴高度,解决z-index失效相关推荐
- CSS行高等于盒子的高度,能让文字在盒子里面垂直居中的原理
CSS行高等于盒子的高度,能让文字在盒子里面垂直居中的原理:用pink老师的一张ppt就成让人一下子明白过来.
- html中设置父盒子的高度,【CSS】设置浮动元素高度等于父元素
最近在练习中发现了这样一个问题: 红色边框为没有设置高度的父元素(.parent),两个子元素(.left,.right)都设置为左浮动,父元素被右边的元素(.right)撑开.现在我想让左边的元素( ...
- html图片的宽度和高度设置,CSS设置img图片的宽度和高度
如何使用CSS控制HTML中图片高度宽度,统一对象内图片高度宽度等样式属性? 我们在布局图片列表时,通常我们要控制img图片的高度和宽度这样来达到图片统一. 如以下这个的图片列表布局示图 图片img高 ...
- CSS初识- 选择器 背景 浮动 盒子模型
CSS初识 CSS:cascading style sheets,css样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边 ...
- 双下划线一粗一细怎么加_css双下划线 css样式中怎样控制下划线的粗细?
html 怎么加双横线给相应的标签加一个属性border-bottom:3px double red; 如果双线间的距离要加大,把3px改为更大的值就行了,不过不能小于3px,不然就叠在一起看不出来是 ...
- css实现3行2列居中高度自适应布局
1.CSS2盒模型 自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层< ...
- html点击控制盒子左右移动,JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例...
本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动.分享给大家供大家参考,具体如下: 1. 盒子跟着鼠标移动 content="width=device-width, user- ...
- CSS盒子塌陷及解决方法
CSS盒子塌陷及解决方法 1 盒子塌陷的原因 2 如何清除塌陷 1 盒子塌陷的原因 什么是盒子塌陷? 外部的盒子没有包裹住内部的浮动盒子,导致了盒子塌陷. 盒子高度塌陷原因? ①父元素没有设置高度(h ...
- html字体变大自动换行,css 实现文字自动换行切同行元素高度自适应
1.实现div行内布局所有行跟随最大高度自适应 html代码样例: 所在部门 @ViewBag.decideDetail.departName 岗位 @ViewBag.decideDetail.pos ...
最新文章
- 【转载】CentsOS系统inotify实时监控服务器文件(夹)定制事件处理程序
- Android使用popueWindow自定义Spinner
- Java中利用socket实现简单的服务端与客户端的通信(基础级)
- NYOJ题目10505C?5S?
- UnicodeDecodeError: 'utf-8' codec can't decode byte 0xce in position 0: invalid continuation by 解决方案
- android_jsbridge,让你和前端愉快的交互
- solaris 命令
- lua菜鸟教程_Lua语言学习
- 二月,劝 Java 工程师不要跳槽!
- Linux chapter 4
- 淘淘商城项目mysql,idea搭建淘淘商城项目
- 【工控老马】洗衣机PLC程序控制系统设计详解
- msp430中如何连续对位进行取反_【万泉河】论PLC编程中的高内聚与低耦合
- 几张思维导图告诉你搜索引擎优化(SEO)核心点
- Machine Learning读书会·北京今日启动(第3期周爱民、张帆)
- 三星s8html查看器,拆解三星S8手机
- 期末考试查分,基于青果高校教务系统的一个自动python脚本代码。
- zookeeper介绍
- java if中的continue_java中break和continue源码解析
- button标签定义type属性