一种设置层叠样式表中Z-Index的方法、系统、设备和介质与流程

一种设置层叠样式表中z-index的方法、系统、设备和介质
技术领域
1.本发明属于网页开发技术领域，特别涉及一种设置层叠样式表中z-index的方法、系统、设备和介质。


背景技术：

2.z-index是css中的一个常见属性，用来指定元素之间的堆叠顺序，其中css：cascading style sheets，即层叠样式表。设置不好，就会影响界面的显示效果。长久以来，开发人员在应用程序开发中对z-index进行设置时，为了让对应元素正常显示，常常选择任意大的值，如z-index：99999，这就会造成整个项目多个元素拥有相同的z-index值或者开发人员无法定义当前元素应该设置的最合适的z-index值，从而引发混乱。另外，开发人员在解决因z-index引发的错误时，常常也会导致新的z-index的错误。最后，随意的z-index设置也会使z-index之间的关系难以追踪，造成开发人员想添加新值时，无法很好的扩展的问题。
3.比如，现在技术中一种是设置几个z-index通用值，每个值用任意数字的增量分隔，使用时可以选择默认设置的z-index值，也可以在必要时在间隔值中间添加自定义的值。如bootstrap中的设置($zindex-dropdown:1000；$zindex-sticky:1020；$zindex-fixed:1030；$zindex-modal-backdrop:1040；$zindex-modal:1050；$zindex-popover:1060；$zindex-tooltip:1070；)一种是使用css预处理器中复杂的mixin算法及设置对整个z-index进行处理。现有的方法要么看起来设置的通用值很简单，但是开发人员在使用时，还是会混淆要选择哪个值才是当前功能最合适的值，另外其变量值及之间设置的间隔值也会让人困惑，不知道为什么要以这些常量值作为通用值，为什么间隔是10，这就变成了让人难以理解的意义不明的数字，而且开发人员如果要定义高于间隔值的自定义值时也会产生问题。要么使用的算法太复杂，开发人员首先要去学习专用的api及理解算法的计算过程，再进行相应的使用，这无疑增加了开发人员的学习成本，另外，使用css预处理器处理的方式也会多了一层编译过程。


技术实现要素：

4.为了解决上述技术问题，本发明提出了一种设置层叠样式表中z-index的方法、系统、设备和介质，使每个z-index都是当前元素显示所需最合适的值，并且可以放心地进行z-index的添加和删除，而不影响其他的堆叠元素，通过关系定义也可以方便地追踪元素层级关系，从而减少了开发人员的学习成本，大大地提高了开发效率，降低了维护成本。
5.为实现上述目的，本发明采用以下技术方案：
6.一种设置层叠样式表中z-index的方法，包括以下步骤：
7.定义特定元素的接口；
8.在定义特定元素的接口之后，定义z-index堆叠关系，通过语义化变量关系定义元素的z-index层级。
index的层叠上下文及特定元素进行接口定义，规范z-index的常量设置，防止常量引用时的拼写错误。然后，创建一个定义z-index的ts文件，在文件中定义z-index基础常量，然后按模块在基础常量的基础上语义化地定义特定元素常量间的关系。最后，在css中引入对应的常量，完成对z-index的设置。因为都是基于js语法，从而无需另外学习其他语言或专门的api，也不会像使用css预处理器(sass，less等)方法那样多一层编译步骤，仅通过语义化地设置z-index的关系，就可以为每个特定功能选择最合适的z-index值，并且可以放心地进行z-index的添加删除，而不影响其他的堆叠元素，从而大大减少了开发人员的学习成本，提高了开发效率，并降低了维护成本。
附图说明
37.如图1为本发明实施例1一种设置层叠样式表中z-index的方法流程图；
38.如图2为本发明实施例2一种设置层叠样式表中z-index的系统示意图。
具体实施方式
39.为能清楚说明本方案的技术特点，下面通过具体实施方式，并结合其附图，对本发明进行详细阐述。下文的公开提供了许多不同的实施例或例子用来实现本发明的不同结构。为了简化本发明的公开，下文中对特定例子的部件和设置进行描述。此外，本发明可以在不同例子中重复参考数字和/或字母。这种重复是为了简化和清楚的目的，其本身不指示所讨论各种实施例和/或设置之间的关系。应当注意，在附图中所图示的部件不一定按比例绘制。本发明省略了对公知组件和处理技术及工艺的描述以避免不必要地限制本发明。
40.实施例1
41.本发明实施例1提出了一种设置层叠样式表中z-index的方法，本发明主要解决前端开发中管理z-index时如何减少开发人员的学习成本，避免出现意义不明的幻数，可以简单地为当前功能选择最合适的z-index值，不会因为修改某处z-index错误而导致新的z-index错误，并使z-index值之间的关系易于追踪的问题。
42.本发明基于typescript定义z-index的层叠上下文及特定元素接口，从而规范z-index的常量设置，进而可通过简单的语义化常量配置来管理css中z-index的方法，通过本发明所述的方法能够使我们在项目开发中摆脱幻数(magic number，开发中意义不明的数字)，不必关心z-index的实际值，只通过语义设置来更简单的使用z-index，而且可以使每个z-index都是当前显示所需最合适的值，并且可以放心地进行z-index的添加和删除，而不影响其他的堆叠元素，从而大大地提高了开发效率，降低了维护成本。
43.如图1给出了本发明实施例1一种设置层叠样式表中z-index的方法流程图；
44.首先，定义特定元素的接口；即创建定义接口的ts文件。按z.《module》.《element》的格式进行接口的定义，规范z-index层叠上下文及特定元素的接口，避免定义堆叠关系时出现拼写错误。其中module为功能模块或组件名称，element为模块或组件中具体要使用z-index的特定元素名称。如：
45.export interface module1{
46.element1:string,
47.element2:string,
48....
49.}
50.export interface module2{
51.element1:string,
52.element2:string,
53....
54.}
55.export interface z{
56.module1:module1,
57.module2:module2,
58....
59.}
60.然后，在定义特定元素的接口之后，定义z-index堆叠关系，通过语义化变量关系定义元素的z-index层级。即创建定义z-index堆叠关系的ts文件。创建定义z-index堆叠关系的ts文件的过程包括：
61.首先，定义基础常量(如const base＝0；const above＝1；const below＝-1；)，其中，base为基准z-index常量值，above是用于层级在base之上的元素值，below是用于层级在base之下的元素值；
62.其次，按模块定义element之间的堆叠关系，可以放在一个文件中进行定义管理，也可以按模块分不同文件进行定义，最后汇总到一个文件中进行管理，如：
63.export const z:z；
64.//定义模块1
65.z.module1.element1＝above base；
66.z.module1.element2＝below base；
67.z.module1.element3＝above z.module1.element1；
68.z.module1.element4＝above z.module1.element3；
69.…
70.//定义模块2
71.z.module2.element1＝below base；
72.z.module2.element2＝above base；
73.z.module2.element3＝above z.module2.element2；
74.…
。
75.最后，引入第三方css-in-js类库(如针对vue的vue-styled-components，针对react的styled-components)，在css中引入定义的z-index常量，对特定项目的z-index进行定义。
76.本发明实施例1提出的一种设置层叠样式表中z-index的方法，使用css-in-js的方式，基于typescript(一种给javascript添加特性的语言扩展),对z-index的层叠上下文及特定元素进行接口定义，规范z-index的常量设置，防止常量引用时的拼写错误。然后，创建一个定义z-index的ts文件，在文件中定义z-index基础常量，然后按模块在基础常量的
基础上语义化地定义特定元素常量间的关系。最后，在css中引入对应的常量，完成对z-index的设置。因为都是基于js语法，从而无需另外学习其他语言或专门的api，也不会像使用css预处理器(sass，less等)方法那样多一层编译步骤，仅通过语义化地设置z-index的关系，就可以为每个特定功能选择最合适的z-index值，并且可以放心地进行z-index的添加删除，而不影响其他的堆叠元素，从而大大减少了开发人员的学习成本，提高了开发效率，并降低了维护成本。
77.实施例2
78.基于本发明实施例1提出的一种设置层叠样式表中z-index的方法，本发明实施例2还提出了一种设置层叠样式表中z-index的系统，如图2为本发明实施例2一种设置层叠样式表中z-index的系统示意图，该系统包括第一定义模块和第二定义模块；
79.第一定义模块用于定义特定元素的接口；
80.第二定义模块用于在定义特定元素的接口之后，定义z-index堆叠关系，通过语义化变量关系定义元素的z-index层级。
81.其中第一定义模块实现的过程为：创建定义接口的ts文件。按z.《module》.《element》的格式进行接口的定义，规范z-index层叠上下文及特定元素的接口，避免定义堆叠关系时出现拼写错误。其中module为功能模块或组件名称，element为模块或组件中具体要使用z-index的特定元素名称。
82.第二定义模块实现的过程为：
83.创建定义z-index堆叠关系的ts文件。创建定义z-index堆叠关系的ts文件的过程包括：
84.首先，定义基础常量(如const base＝0；const above＝1；const below＝-1；)，其中，base为基准z-index常量值，above是用于层级在base之上的元素值，below是用于层级在base之下的元素值；
85.其次，按模块定义element之间的堆叠关系，可以放在一个文件中进行定义管理，也可以按模块分不同文件进行定义，最后汇总到一个文件中进行管理，如：
86.export const z:z；
87.//定义模块1
88.z.module1.element1＝above base；
89.z.module1.element2＝below base；
90.z.module1.element3＝above z.module1.element1；
91.z.module1.element4＝above z.module1.element3；
92.…
93.//定义模块2
94.z.module2.element1＝below base；
95.z.module2.element2＝above base；
96.z.module2.element3＝above z.module2.element2；
97.…
。
98.最后，引入第三方css-in-js类库(如针对vue的vue-styled-components，针对react的styled-components)，在css中引入定义的z-index常量，对特定项目的z-index进
行定义。
99.本发明实施例2提出的一种设置层叠样式表中z-index的系统，使我们在项目开发中摆脱了无法理解意义的z-index值设置，不必关心z-index的实际值，只需通过语义设置来更简单地使用z-index，这种方法可以使每个z-index都是当前元素显示所需最合适的值，并且可以放心地进行z-index的添加和删除，而不影响其他的堆叠元素，通过关系定义也可以方便地追踪元素层级关系，从而减少了开发人员的学习成本，大大地提高了开发效率，降低了维护成本。
100.实施例3
101.本发明还提出了一种设备，包括：
102.存储器，用于存储计算机程序；
103.处理器，用于执行所述计算机程序时实现方法步骤如下：
104.如图1给出了本发明实施例1一种设置层叠样式表中z-index的方法流程图；
105.首先，定义特定元素的接口；即创建定义接口的ts文件。按z.《module》.《element》的格式进行接口的定义，规范z-index层叠上下文及特定元素的接口，避免定义堆叠关系时出现拼写错误。其中module为功能模块或组件名称，element为模块或组件中具体要使用z-index的特定元素名称。如：
106.export interface module1{
107.element1:string,
108.element2:string,
109....
110.}
111.export interface module2{
112.element1:string,
113.element2:string,
114....
115.}
116.export interface z{
117.module1:module1,
118.module2:module2,
119....
120.}
121.然后，在定义特定元素的接口之后，定义z-index堆叠关系，通过语义化变量关系定义元素的z-index层级。即创建定义z-index堆叠关系的ts文件。创建定义z-index堆叠关系的ts文件的过程包括：
122.首先，定义基础常量(如const base＝0；const above＝1；const below＝-1；)，其中，base为基准z-index常量值，above是用于层级在base之上的元素值，below是用于层级在base之下的元素值；
123.其次，按模块定义element之间的堆叠关系，可以放在一个文件中进行定义管理，也可以按模块分不同文件进行定义，最后汇总到一个文件中进行管理，如：
124.export const z:z；
125.//定义模块1
126.z.module1.element1＝above base；
127.z.module1.element2＝below base；
128.z.module1.element3＝above z.module1.element1；
129.z.module1.element4＝above z.module1.element3；
130.…
131.//定义模块2
132.z.module2.element1＝below base；
133.z.module2.element2＝above base；
134.z.module2.element3＝above z.module2.element2；
135.…
。
136.最后，引入第三方css-in-js类库(如针对vue的vue-styled-components，针对react的styled-components)，在css中引入定义的z-index常量，对特定项目的z-index进行定义。
137.本发明实施例3提出的一种设置层叠样式表中z-index的处理设备，使用css-in-js的方式，基于typescript(一种给javascript添加特性的语言扩展),对z-index的层叠上下文及特定元素进行接口定义，规范z-index的常量设置，防止常量引用时的拼写错误。然后，创建一个定义z-index的ts文件，在文件中定义z-index基础常量，然后按模块在基础常量的基础上语义化地定义特定元素常量间的关系。最后，在css中引入对应的常量，完成对z-index的设置。因为都是基于js语法，从而无需另外学习其他语言或专门的api，也不会像使用css预处理器(sass，less等)方法那样多一层编译步骤，仅通过语义化地设置z-index的关系，就可以为每个特定功能选择最合适的z-index值，并且可以放心地进行z-index的添加删除，而不影响其他的堆叠元素，从而大大减少了开发人员的学习成本，提高了开发效率，并降低了维护成本。
138.需要说明：本发明技术方案还提供了一种电子设备，包括：通信接口，能够与其它设备比如网络设备等进行信息交互；处理器，与通信接口连接，以实现与其它设备进行信息交互，用于运行计算机程序时，执行上述一个或多个技术方案提供的一种设置层叠样式表中z-index的方法，而所述计算机程序存储在存储器上。当然，实际应用时，电子设备中的各个组件通过总线系统耦合在一起。可理解，总线系统用于实现这些组件之间的连接通信。总线系统除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。本技术实施例中的存储器用于存储各种类型的数据以支持电子设备的操作。这些数据的示例包括：用于在电子设备上操作的任何计算机程序。可以理解，存储器可以是易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。其中，非易失性存储器可以是只读存储器(rom，read only memory)、可编程只读存储器(prom，programmable read-only memory)、可擦除可编程只读存储器(eprom，erasable programmable read-only memory)、电可擦除可编程只读存储器(eeprom，electrically erasable programmable read-only memory)、磁性随机存取存储器(fram，ferromagnetic random access memory)、快闪存储器(flash memory)、磁表面存储器、光盘、或只读光盘(cd-rom，compact disc read-only memory)；磁
表面存储器可以是磁盘存储器或磁带存储器。易失性存储器可以是随机存取存储器(ram，random accessmemory)，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的ram可用，例如静态随机存取存储器(sram，static random access memory)、同步静态随机存取存储器(ssram，synchronous static random access memory)、动态随机存取存储器(dram，dynamic random access memory)、同步动态随机存取存储器(sdram，synchronousdynamic random access memory)、双倍数据速率同步动态随机存取存储器(ddrsdram，double data rate synchronous dynamic random access memory)、增强型同步动态随机存取存储器(esdram，enhanced synchronous dynamic random access memory)、同步连接动态随机存取存储器(sldram，synclink dynamic random access memory)、直接内存总线随机存取存储器(drram，direct rambus random access memory)。本技术实施例描述的存储器旨在包括但不限于这些和任意其它适合类型的存储器。上述本技术实施例揭示的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器、dsp(digital signal processing，即指能够实现数字信号处理技术的芯片)，或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。处理器可以实现或者执行本技术实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本技术实施例所公开的方法的步骤，可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于存储介质中，该存储介质位于存储器，处理器读取存储器中的程序，结合其硬件完成前述方法的步骤。处理器执行所述程序时实现本技术实施例的各个方法中的相应流程，为了简洁，在此不再赘述。
139.实施例4
140.本发明还提出了一种可读存储介质，可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现方法步骤如下：
141.如图1给出了本发明实施例1一种设置层叠样式表中z-index的方法流程图；首先，定义特定元素的接口；即创建定义接口的ts文件。按z.《module》.《element》的格式进行接口的定义，规范z-index层叠上下文及特定元素的接口，避免定义堆叠关系时出现拼写错误。其中module为功能模块或组件名称，element为模块或组件中具体要使用z-index的特定元素名称。如：
142.export interface module1{
143.element1:string,
144.element2:string,
145....
146.}
147.export interface module2{
148.element1:string,
149.element2:string,
150....
151.}
152.export interface z{
153.module1:module1,
154.module2:module2,
155....
156.}
157.然后，在定义特定元素的接口之后，定义z-index堆叠关系，通过语义化变量关系定义元素的z-index层级。即创建定义z-index堆叠关系的ts文件。创建定义z-index堆叠关系的ts文件的过程包括：
158.首先，定义基础常量(如const base＝0；const above＝1；const below＝-1；)，其中，base为基准z-index常量值，above是用于层级在base之上的元素值，below是用于层级在base之下的元素值；
159.其次，按模块定义element之间的堆叠关系，可以放在一个文件中进行定义管理，也可以按模块分不同文件进行定义，最后汇总到一个文件中进行管理，如：
160.export const z:z；
161.//定义模块1
162.z.module1.element1＝above base；
163.z.module1.element2＝below base；
164.z.module1.element3＝above z.module1.element1；
165.z.module1.element4＝above z.module1.element3；
166.…
167.//定义模块2
168.z.module2.element1＝below base；
169.z.module2.element2＝above base；
170.z.module2.element3＝above z.module2.element2；
171.…
。
172.最后，引入第三方css-in-js类库(如针对vue的vue-styled-components，针对react的styled-components)，在css中引入定义的z-index常量，对特定项目的z-index进行定义。
173.本发明实施例4提出的一种设置层叠样式表中z-index的存储介质，使用css-in-js的方式，基于typescript(一种给javascript添加特性的语言扩展),对z-index的层叠上下文及特定元素进行接口定义，规范z-index的常量设置，防止常量引用时的拼写错误。然后，创建一个定义z-index的ts文件，在文件中定义z-index基础常量，然后按模块在基础常量的基础上语义化地定义特定元素常量间的关系。最后，在css中引入对应的常量，完成对z-index的设置。因为都是基于js语法，从而无需另外学习其他语言或专门的api，也不会像使用css预处理器(sass，less等)方法那样多一层编译步骤，仅通过语义化地设置z-index的关系，就可以为每个特定功能选择最合适的z-index值，并且可以放心地进行z-index的添加删除，而不影响其他的堆叠元素，从而大大减少了开发人员的学习成本，提高了开发效率，并降低了维护成本。
174.本技术实施例还提供了一种存储介质，即计算机存储介质，具体为计算机可读存储介质，例如包括存储计算机程序的存储器，上述计算机程序可由处理器执行，以完成前述方法所述步骤。计算机可读存储介质可以是fram、rom、prom、eprom、eeprom、flash memory、磁表面存储器、光盘、或cd-rom等存储器。
175.本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：移动存储设备、rom、ram、磁碟或者光盘等各种可以存储程序代码的介质。或者，本技术上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术实施例的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台电子设备(可以是个人计算机、服务器、或者网络设备等)执行本技术各个实施例所述方法的全部或部分。而前述的存储介质包括：移动存储设备、rom、ram、磁碟或者光盘等各种可以存储程序代码的介质。
176.本技术实施例提供的一种设置层叠样式表中z-index的处理设备和存储介质中相关部分的说明可以参见本技术实施例1提供的一种设置层叠样式表中z-index的方法中对应部分的详细说明，在此不再赘述。
177.需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。另外，本技术实施例提供的上述技术方案中与现有技术中对应技术方案实现原理一致的部分并未详细说明，以免过多赘述。
178.上述虽然结合附图对本发明的具体实施方式进行了描述，但并非对本发明保护范围的限制。对于所属领域的技术人员来说，在上述说明的基础上还可以做出其它不同形式的修改或变形。这里无需也无法对所有的实施方式予以穷举。在本发明的技术方案的基础上，本领域技术人员不需要付出创造性劳动即可做出的各种修改或变形仍在本发明的保护范围以内。