div层调整z-index属性在IE中无效原因分析及解决方法

首先我们需要了解一下 z-index 属性的作用。z-index 属性可以设置元素的层叠顺序，即决定了哪个元素位于其他元素之上。在浏览器中，所有的元素都存在于一个包含层级的栈中，z-index 就是用来调整元素在栈中的层级。z-index 的值越大，元素就越靠近栈的顶层，就越容易被用户看见。

然而，在 IE（特别是 IE6/7）中，使用 z-index 属性调整 div 层的层叠顺序时，可能会出现无效的情况，即调整后 div 层的层叠顺序没有发生变化。这是因为在 IE6/7 中，z-index 属性只能作用在 position 属性值为 relative、absolute、fixed 的元素上。而如果一个元素没有 position 属性或 position 值为 static，则 z-index 是无效的。

解决方法是在调整层叠顺序的同时，将 div 层的 position 值设置为 relative、absolute、fixed 中的一种。下面是两个典型的示例。

1. 背景图片遮盖问题

在一个 div 包含的子元素中，如果存在一张背景图片，则该图片会默认铺满整个 div。现在，假设我们需要在这个 div 上面添加另一个层，以遮盖住该背景图片。以下是代码示例：

<div class="container">
  <div class="box"></div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background: url('background.jpg') no-repeat center center;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  background-color: #fff;
}

在上述示例中，我们通过设置 container 类的 position 属性为 relative，使它成为一个拥有层叠上下文的元素。然后，将 box 类的 position 属性设置为 absolute，这样它就可以相对于 container 元素进行定位。最后，设置 box 类的 z-index 属性为 1，这样它就位于 background 图片之前了。

1. DIV层面板效果问题

在页面中，有时需要实现一个类似面板效果的布局，如设置两个 div 元素，一个用于显示面板内容，另一个用于遮盖该面板。以下是代码示例：

<div class="container">
  <div class="content"></div>
  <div class="mask"></div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 200px;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  background-color: #fff;
}

.mask {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .5;
}

在示例中，我们设置 container 类的 position 属性为 relative，content 类的 position 属性为 absolute，并使用 translate 属性将其居中。然后设置 content 类的 z-index 属性为 2，以便它位于 mask 类之上。最后，设置 mask 类的 z-index 属性为 1，使用 opacity 属性将其显示为半透明黑色。这样，我们就成功实现了一个面板效果的布局。

通过以上两个示例，我们可以看到，设置 div 层的 position 属性是解决 z-index 在 IE 中无效的问题的一个有效方法，能够轻松解决层叠问题。