CSS：重叠DIV问题

问题描述

我想有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; 
  

解决方案

不知道任何细节，

p>规范定义了7个绘画层。从后面到前面，他们
是：

 当前堆叠上下文的边框和背景
带有负z-index的定位后代
定义了没有z-index属性的非定位块级后代$  -  
浮动后代及其内容
未定位的内联内容
没有z-index，z-index：auto或z-index的定位后代：0 
 z-index大于0的定位后代
  pre> 
 
 
来源是 。
 
 
尝试在div1上生成z-index，而不是在div2上生成z-index。
 
 
 
注意，z-index只适用于位置值为绝对值，固定值或相对值之一的框的堆栈级别。
 
I want to have 2 divs. looking like that:



The problem is that if i just set margin-top: -50px DIV2 becomes on TOP.
If i use z-index, DIV2 goes behind, but the form on DIV2 cannot be used, since it DIV2 is somewhat behind, cannot be clicked, selected or any of those. 

How do I make it work?

DIV1 css:
position:relative;
height: 350px;
margin-top: -50px;
z-index: -10;
DIV2 css:
padding: 24px;
z-index: 10;
margin-bottom: -50px;
 解决方案 
Without knowing any details, it could be related to negative z-indexes.
The stacking order makes distinction between positive and negative values:
Try making z-index on div1 positive instead of the z-index of div2 negative
Be careful, z-index only applies on the stack level of a box whose position value is one of absolute, fixed, or relative.
                        
这篇关于CSS：重叠DIV问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！