z-index在两个堆叠上下文之间的问题。

当两个元素都位于不同堆叠上下文中，并且需要沿z轴方向进行层叠时，就会出现z-index问题。此时，我们可以使用以下方法来解决：

1. 为两个元素的外层容器创建新的堆叠上下文。

<div class="parent1" style="position: relative; z-index: 1;">
  <div class="child1" style="position: relative; z-index: 2;">Hello World!</div>
</div>

<div class="parent2" style="position: relative; z-index: 3;">
  <div class="child2" style="position: relative; z-index: 4;">Hello World!</div>
</div>

2. 使用不同的z-index值来调整它们的层叠顺序。

<div class="parent1" style="position: relative; z-index: 1;">
  <div class="child1" style="position: relative; z-index: 2;">Hello World!</div>
</div>

<div class="parent2" style="position: relative; z-index: 2;">
  <div class="child2" style="position: relative; z-index: 3;">Hello World!</div>
</div>

无论哪种方法，我们都可以在两个元素之间创建新的堆叠上下文，并使用多个不同的z-index值来调整它们的层叠顺序。