如何在层次结构中让 DIV 位于其他 DIV 之下？

Question

我在处理分层 DIV 元素的顺序时遇到问题。我有一个 DIV .lens-flare，它位于 HTML 层次结构的底部。然而，当我 transform: translate 位置使其包含整个父级 DIV 时，它会显示层次结构中位于其上方的元素。

所以我尝试设置 z-indexes，然后将我的 translate 变成 translate3d。我仍然无法在 .top-nav-bar、.nav-bar 或 .cta.

下获取 .lens-flare

目前我有一个 pointer-events: none 应用，所以我至少可以点击下面的东西。但是我怎样才能真正成功地将 .lens-flare 层移动到其他所有东西下面呢？

这是我的 CodePen 项目

Answer 1

稍后呈现的元素被认为比在它们之前呈现的元素更靠近屏幕。

Z-index 是答案，如果你想改变这个，你只需要记住 z-index 只适用于定位的元素。

.lens-flare
  position: relative
  z-index: 1

.nav-bar, .top-nav-bar, .cta
  position: relative
  z-index: 2

How to get DIV Beneath Other DIVs in Hierarchy?