如何在层次结构中将DIV置于其他DIV之下？

I'm having trouble with the order of layered DIV elements. I have a DIV .lens-flare that's at the bottom of the hierarchy in HTML. Yet when I transform: translate the position so it encompasses the entire parent DIV, it shows above elements that are above it in the hierarchy.

我遇到了分层DIV元素的顺序问题。我有一个DIV .lens-flare，位于HTML层次结构的底部。然而，当我转换时：翻译位置使其包含整个父DIV，它显示层次结构中位于其上方的元素。

So I tried setting z-indexes, and then turned my translate into translate3d. Still I'm not able to get .lens-flare underneath .top-nav-bar, .nav-bar, or .cta.

所以我尝试设置z-indexes，然后将我的翻译转换为translate3d。我仍然无法在.top-nav-bar，.nav-bar或.cta下面获得.lens-flare。

Currently I have a pointer-events: none applied so I can at least click on the things underneath. But how can i actually move the .lens-flare layer under everything else successfully?

目前我有一个指针事件：没有应用所以我至少可以点击下面的东西。但是，我如何才能成功地将.lens-flare层移动到其他所有地方？

Here's my CodePen for the project

这是我的项目CodePen

1 个解决方案

#1

Elements rendered later are considered being closer to the screen than the elements rendered before them.

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

Z-index is the answer if you want to change this, you just need to remember z-index works only with elements that are positioned.

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

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

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

Your corrected codepen: http://codepen.io/sEvher/pen/doyWoW

你纠正的codepen：http：//codepen.io/sEvher/pen/doyWoW

#1