层叠顺序、层叠上下文：虚拟Z轴的争夺战

层叠顺序和层叠上下文

层叠顺序（stacking order）表示元素发生层叠时候有着特定的垂直显示顺序。 如果是同级元素重叠，那么后面元素盖在前面元素的身上。 层叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素可以基于不同依据规则产生三维堆叠，通俗地讲，就是可以理解为不同的 HTML 元素所在的三维世界。

层叠顺序规则

层叠顺序由以下规则决定：

• 定位属性 ：具有定位属性（position）的元素总是位于没有定位属性的元素之上。定位属性包括：absolute、fixed、relative 和 sticky。
• z-index 属性 ：z-index 属性用于指定元素在层叠顺序中的位置。z-index 值较大的元素位于 z-index 值较小的元素之上。
• 元素的创建顺序 ：如果两个元素具有相同的定位属性和 z-index 值，那么创建顺序较晚的元素位于创建顺序较早的元素之上。

层叠上下文

层叠上下文是一个三维的环境，元素在这个环境中可以根据不同的规则进行堆叠。层叠上下文可以由以下元素创建：

• 根元素 (html) ：根元素是所有 HTML 元素的父元素，它总是创建一个层叠上下文。
• 具有定位属性（position）的元素 ：具有定位属性的元素会创建一个新的层叠上下文。
• iframe 元素 ：iframe 元素也会创建一个新的层叠上下文。

层叠上下文的规则

在层叠上下文中，元素的层叠顺序由以下规则决定：

• z-index 属性 ：z-index 属性用于指定元素在层叠顺序中的位置。z-index 值较大的元素位于 z-index 值较小的元素之上。
• 元素的创建顺序 ：如果两个元素具有相同的 z-index 值，那么创建顺序较晚的元素位于创建顺序较早的元素之上。

使用层叠顺序和层叠上下文的技巧

• 使用 z-index 属性来控制元素的层叠顺序 ：z-index 属性可以用于将某些元素置于其他元素之上。例如，您可以将导航栏的 z-index 值设置为 999，以确保它始终位于页面顶部的其他元素之上。
• 使用层叠上下文来创建独立的堆叠环境 ：层叠上下文可以用于创建独立的堆叠环境。例如，您可以使用 iframe 元素来创建独立的层叠上下文，以便在其中定位元素，而不会影响到页面其他部分的元素。
• 了解层叠顺序和层叠上下文的规则 ：了解层叠顺序和层叠上下文的规则可以帮助您避免出现意外的层叠问题。例如，您应该知道，具有定位属性的元素总是位于没有定位属性的元素之上，并且 z-index 值较大的元素位于 z-index 值较小的元素之上。

结论

层叠顺序和层叠上下文是网页设计中重要的概念，理解它们可以帮助您创建具有良好用户体验的网站。通过使用 z-index 属性和层叠上下文，您可以控制元素的层叠顺序，并创建独立的堆叠环境。