CSS：重叠DIV问题 [英] CSS: Overlapping DIVs issue

问题描述

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

  
The specs define 7 painting layers. Starting from back to front, they
  are:
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
Source is here.
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问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！