引导元素

Question

我面临的情况是我正在努力寻找解决方案。所以我有两个部分。在顶部，我有一个图像，我使用flex放在底部。这个想法很简单，当我向下滚动时，图像应该滑动到位。

我有这个工作，但我注意到当图像在第2部分内时，它位于此部分的顶部，而不是在其后面。理想情况下，您应该无法在第2部分中看到任何此图片。JSFiddle演示了我的问题。

所以我找到了解决这个问题的方法。我基本上给每个部分一个相对位置，然后设置一个z-index。

#sectionTwo {
  position: relative;
  z-index: -1000;
}
#sectionThree {
  position: relative;
  z-index:1000;
  background: #ccc;
}

这似乎解决了这个问题，但我不喜欢的一件事是，当我尝试检查元素时，似乎总是关注body元素而不是我选择的部分。

无论如何，有了这个修复，我遇到了另一个问题。该部分还需要一个顶部的框，它将重叠到它上面的部分。我做了一个快速草图来展示我的目标

我注意到设置z-index现在导致我出现问题。我无法将该框与第一部分重叠。

这是我最新的JSFiddle，它展示了我的目标。

所以我真的在听取关于我是否正确处理z-index的建议，以及如何让盒子重叠第一部分。

由于

Answer 1

这就是你追求的吗？如果您希望第2部分中的元素位于第1部分的顶部，则需要为第2部分提供比第1部分更高的7索引。

GET testi/testt/_search
{
    "query" : {
        "term" : { "name" : "John" }
    }
}

Answer 2

进入正zindex值似乎可以解决您的问题：

#sectionOne {
  position: relative;
  z-index: 10;
}
#sectionTwo {
  position: relative;
  z-index: 20;
}
#sectionThree {
  position: relative;
  z-index: 30;
}