Question

为什么box2与它下面的box1不重叠，因为它的z-index比box1高？

    .box1 {
      height: 30px;
      width: auto;
      z-index: 1;
      position: relative;
    }
    .box2 {
      position: absolute;
      height: 20px;
      border: 1px solid red;
      background-color: white;
      z-index: 2;
    }

<div class='box1'>
  Just a box
  <div class='box2'>Should overlap</div>
</div>

<div class='box1'>
  Why is this not partially hidden?
</div>

这是一个小提琴：http://jsfiddle.net/k7m4y42L/ 另一个类似于我的HTML结构：http://jsfiddle.net/1nv8fd93/

Answer 1

您提供的box2 z索引高于z-index的{{1}}，但由于您将其置于box1内，{ {1}}以某种方式重置。

这意味着您提供的z-index为＆lt; 2 INSIDE a box1的所有内容都隐藏在z-index下。

这个问题可以通过两种方式解决：纯CSS或jQuery。

<强> CSS

在CSS中，它很简单：只需在悬停时更改box1 box2，就像这样：

z-index

这会使您正在悬停的当前box1比页面上的其他.box1:hover { z-index: 3; }具有更高的box1。我在z-index上添加了一个小box1 - 效果，以获得您想要的最终产品。

工作fiddle

<强>的jQuery

在jQuery中，它比必要的复杂一点，但结果与上面相同（我会选择CSS解决方案）。下面的代码片段执行以下操作：

当鼠标悬停在hover上时，它会向该特定box2添加.box1，但仅当它包含一个类z-index: 3的div时。

<强>的jQuery

box1

工作fiddle。

在某种程度上，上述只是一个非常复杂的box2 - 效果。只有在制作此解决方案后，我才考虑在$('.box1').mouseover(function() { $(this).has(".box2").css('z-index', 3); });上添加:hover并调整:hover。但由于它可能对某些人（可能没有）有用，我已将其留在答案中。

Answer 2

您需要设置规则top，因为绝对＆＃34; box2＆＃34;相对于＆＃34; box1＆＃34;

<强> CSS

.box1 {
    height:30px;
    width: auto;
    z-index:1;
    position:relative;
}

.box2 {
    position: absolute;
    height: 20px;
    border:1px solid red;
    background-color:black;
    z-index:2;
    top:0px; /* Set this rule */
}

<强> DEMO HERE

Answer 3

我要做的是使用jquery来制作这些工具提示，而不是尝试在css中进行。这是Simple Tooltip with jQuery或更好的简单演示，使用像qTip这样的版本来制作更漂亮的版本。

较高的z-index框，不与较低的z-index框重叠

3 个答案: