当你使用定位的时候，你会遇到这样的情况，一个定位元素即使设置到更高一层也无法覆盖另一个定位元素？通过了解堆栈上下文，您可以更好地构建您的应用程序。了解渲染过程和级联顺序当浏览器将HTML解析为DOM结构时，它还会创建另一种树结构-渲染树。它被渲染后，就成为了用户看到的视图，同时也决定了浏览器绘制HTML元素的顺序。这个顺序很重要，因为越晚渲染的元素，它的显示顺序就越高，有可能会覆盖前面的元素。在没有定位的情况下，渲染顺序由HTML元素的顺序决定，例如下面的HTML结构：
one
two
three
它们的堆叠顺序如下图所示，作者使用了一些负边距来强制元素覆盖，但没有使用定位。元素渲染得越靠后，显示得越近。当您使用定位时，此行为会发生变化。浏览器先绘制没有定位的元素，然后绘制有定位的元素。默认情况下，使用定位的元素会显示在不使用定位的元素之前。下图中，为前两个元素设置定位position:relative，它们的显示顺序会变成最前面，覆盖第三个没有定位的元素（position属性默认值为static，即not定位），即使它在HTML结构中的顺序没有改变。请注意，在这些定位元素中，第二个元素仍然显示在第一个元素的前面。首先定位元素会显示在普通元素的前面，然后根据HTML结构中的顺序来决定定位元素的显示，也就是显示在前面。什么是级联上下文？由浏览器绘制的一个或多个元素组成的DOM树形成级联上下文。当你在定位元素上设置z-index属性时（position是relative，absolute，fixed，sticky），这个元素会创建一个新的层叠上下文，并成为这个层叠上下文的根元素。此根元素的所有子元素都是此堆叠上下文的一部分。堆叠上下文的子元素都在其中绘制，因此堆叠上下文外部的元素无法在堆叠上下文内部的子元素之间设置它们的位置。也就是说，外层元素C不能在堆叠上下文的子元素A和B的中间。同理，当一个元素C被设置为覆盖另一个元素D时，D元素内部的子元素不能位于元素C之上。举个例子来说明：