兰州市建设厅官方网站,厦门app开发需要多少钱,.net网站开发简介,网站地址英文关于z-index我们的共识 共识一 首先#xff0c;我们都同意#xff0c;z-index对于普通盒子是无效的#xff0c;这里的“普通盒子”是除了下文我会提到的“神奇盒子”外的所有盒子#xff0c;至于什么是“神奇盒子”请慢慢看。 对于普通盒子#xff0c;不管z-index值如何我们都同意z-index对于普通盒子是无效的这里的“普通盒子”是除了下文我会提到的“神奇盒子”外的所有盒子至于什么是“神奇盒子”请慢慢看。 对于普通盒子不管z-index值如何写在html文档中后面的块会在写在前面的盒子上面float的盒子会在没有float的盒子上面文字等inline、inline-block元素会在block元素的上面。 以下所有代码示例请查看github查看完整源码 div classfirstfirst div/divdiv classsecondsecond div/divdiv classinlineinline div/divdiv classfloat_firstfirst float div/divdiv classfloat_secondsecond float div/div1234512345div{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;}12345678910111213141516171819202122231234567891011121314151617181920212223 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 classblockblock box/divdiv classabsoluteabsolute box/divdiv classnegativenegative box/divdiv classpositivepositive box/divdiv classfloatfloat box/div1234512345html{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;}1234567891011121314151617181920212223242526272829303132333435363712345678910111213141516171819202122232425262728293031323334353637 结果 结论 html - z-index负值神奇盒子绝对定位 - 块状盒子 - float 盒子 - z-index auto或者0的神奇盒子绝对定位 - z-index正值神奇盒子绝对定位视轴越来越高。PSinline或者inline-block盒子高于float盒子但低于auto z-index神奇盒子就是位于粉色和蓝色盒子之间。 关于这个结论你可以这么考虑在普通盒子视轴排列的基础上神奇盒子可以根据z-index值自由穿梭于普通盒子上或下。 以上都是兄弟盒子之间的关系父子盒子关系很容易理解子盒子会高于父盒子不然我们写的子块不都被父块覆盖了。如果我想知道子盒子与其父盒子的兄弟盒子的关系呢子盒子与其伯伯盒子的关系 当讨论嵌套盒子视轴关系时需要注意的问题 这里我只想提醒大家如果父盒子是神奇盒子子盒子与其伯伯盒子子盒子的父盒子的兄弟盒子的视轴关系是由父盒子与这个伯伯盒子关系决定的。比如 div classfatherfahter box div classsonson box/div/divdiv classbrotherbrother box/div1212div{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;}12345678910111213141516171819201234567891011121314151617181920 位置请用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;
}
