CSS：重叠DIV问题

Question

我想要2个div。看起来像那样：

问题是，如果我只是设置margin-top: -50px DIV2变为TOP。 如果我使用z-index，DIV2会落后，但DIV2上的表格不能使用，因为DIV2有点落后，无法点击，选择或任何其他。

如何让它发挥作用？

DIV1 css：

position:relative;
height: 350px;
margin-top: -50px;
z-index: -10;

DIV2 css：

padding: 24px;
z-index: 10;
margin-bottom: -50px;

Answer 1

在不知道任何细节的情况下，它可能与负z指数有关。

堆叠顺序区分正值和负值：

  

规格定义了7个绘画层。从后到前，他们   是：

The borders and background of the current stacking context
Positioned descendants with negative z-index
Nonpositioned block-level descendants with no z-index property defined -- paragraphs, tables, lists, and so on
Floating descendants and their contents
Nonpositioned inline content
Positioned descendants with no z-index, z-index: auto, or z-index: 0
Positioned descendants with z-index greater than 0

     

来源为here。

尝试在div1上创建z-index而不是div2 negative的z-index

注意，z-index仅适用于位置值为绝对值，固定值或相对值的盒子的堆栈级别。

Answer 2

感谢韦斯利的帮助，这是实际的代码：

DIV1 css：

position:relative;
z-index: 100;

DIV2 css：

z-index: 10;
margin-bottom: -50px;