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

Question

当box2的z-index高于box1时,为什么box2不会与它下方的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-index,它比更高z-index的box1,但既然你把它放在里面box1,将z-index被以某种方式复位.

这意味着你给z-index <2 INSIDE a的所有东西box1都隐藏了box2.

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

CSS

在CSS中,它很简单:只需更改z-index的box1悬停,像这样:

.box1:hover {
    z-index: 3;
}

这将使box1您悬停的电流高于页面上的z-index其他电流box1.我添加了一个小hover的-效应box2为好,争取多一些你想要的最终产品.

工作小提琴

jQuery的

在jQuery中,它比必要的复杂一点,但结果与上面相同(我会选择CSS解决方案).下面的代码片段执行以下操作:

当鼠标悬停时.box1,它会添加一个z-index: 3特定的box1,但只有它包含类的div box2.

jQuery的

$('.box1').mouseover(function() {
    $(this).has(".box2").css('z-index', 3);
});

工作小提琴.

在某种程度上,上述只是一个非常复杂的:hover影响.这只是后使该解决方案,我认为有关将:hover上box1和适应z-index.但是因为它可能对某些人(可能没有)有用,所以我把它留在了答案中.