你真的了解层级吗?带你简单剖析css层级到底是如何设计的

前言

前端的小伙伴们应该都有接触过css中关于层级的概念,即在一个页面中,两个或多个元素重叠时,哪个元素应当处于更高层。但是其中的原理其实并没有那么简单,如果不了解其中的原理,可能会像我一样出现设计上的错误。

如下图:

这个听起来不是很简单的概念吗,为什么我要聊这个,这是因为我在开发我的绘图系统中,发现了这么一个现象。我期望实现如下图(来自processOn),选中组件以后,选中组件的层级能够高于2组件,1组件本体居于原来的位置不变。

但是我无论怎么去调整我选中框的层级,都无法实现让它单独层级置顶的功能。

打开开发者工具,剖析了我们html结构的不同之处。我发现,processOn中,选中框和图形并不是父子关系,而是并列关系。

选择框:

元素:

而我的选中框和内部组件采用的是父子关系。这就是我因为不了解css的层级设计,从而导致了我的设计从根本上出现了错误。

接下来,我讲讲解为什么会出现这样的现象。

控制层级的两个例子

用层级控制并列元素的显示

在css中,我们可以通过z-index这个属性控制层级。当然了,我们要使之产生作用的前提就是,position不是static

z-index的值一般为数字,数字越大,层级越高。下面这个例子当中,我们为几个并列的元素设置不同的层级值,进行比较。

代码:

xml 复制代码
<body>
    <style>
        .box{
            display: inline-block;
            width: 100px;
            height: 100px;
            position: absolute
        }
        .zIndex1{
            left: 30px;
            top: 30px;
            background: red;
        }
        .zIndex2{
            z-index: 0;
            left: 50px;
            top: 50px;
            background: blue;
        }
        .zIndex3{
            z-index: 99;
            left: 70px;
            top: 70px;
            background: green;
        }
        .zIndex4{
            z-index: -1;
            left: 10px;
            top: 10px;
            background: yellow;
        }
    </style>
    <div class="box zIndex1">
        box1-无
    </div>
    <div class="box zIndex2">
        box2-0
    </div>
    <div class="box zIndex4">
        box4-(-1)
    </div>
    <div class="box zIndex3">
        box3-99
    </div>
</body>

效果:

从上面的例子我们可以知道,z-index的数值排序中负数<无<0<正数

父子关系下,层级的效果

我们将box2的层级设置为99,放在父容器box(层级为-1)中。另外还有一个和box1并列的元素box3(层级为0)。

代码如下:

xml 复制代码
<body>
    <style>
        .box{
            display: inline-block;
            width: 100px;
            height: 100px;
            position: absolute
        }
        .zIndex1{
            width: 200px;
            height: 200px;
            z-index: -1;
            background: blue;
        }
        .zIndex2{
            left: 50px;
            top: 50px;
            z-index: 99;
            background: green;
        }
        .zIndex3{
            left: 100px;
            top: 100px;
            z-index: 10;
            background: yellow;
        }
    </style>
    <div class="box zIndex3">
        box3-0
    </div>
    <div class="box zIndex1">
        box1-(-1)
        <div class="box zIndex2">
            box2-99
        </div>
    </div>
</body>

效果:

一般情况下,我们认为按照层级数值排序,从上到下应当是box2(99) box3(0) box1(-1)。

然而,实际情况是box3 box2 box1。这也是前面我产生设计失误的关键所在。

css中z-index的设计剖析

css中在z轴上的设计,我们可以将元素简化为一个个盒子,层级的比较只在并列的两个盒子之间进行。如果父级盒子的层级较低,那么其子元素层级就算设置成999也不会比高于其父级的盒子的层级高。

如下图:

总结

从理解了层级原理再到反思之前写过的项目,突然也理解到了,一般弹窗组件的元素被放在根节点下的原因,processOn将各个元素都放在同一层的原因....

经过这次我又一次意识到,程序员不能光写代码,也需要时间去沉淀自己,去理解其中的运作原理,才能够做出更好的设计,从而达到事半功倍的效果。

希望我的文章能对各位读者有所帮助。

相关推荐
前端爆冲几秒前
项目中无用export的检测方案
前端
热爱编程的小曾28 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin39 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox