解决绝对定位元素不能覆盖其父元素同级的绝对定位元素问题

问题描述

鼠标悬浮显示具体内容，存在不能覆盖其父元素同级的绝对定位元素的问题，父级设置的z-index层级都是相同的

原因分析：

HTML:
<div id="aa">
  <div id="bb">
    <div id="dd"></div></div>
  <div id="cc"></div>
</div>

CSS:
#aa{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #ddd;
  z-index: 1;
}
#bb{
  position: absolute;
  width: 80px;
  height: 100px;
  background-color: #000;
  z-index: 2;
}
#cc{
  position: absolute;
  width: 70px;
  height: 10px;
  bottom:0;
  background-color: red;
  z-index: 2;
}
#dd{
  position: absolute;
  width: 60px;
  height: 2000px;
  background-color: yellow;
  z-index: 17;
}

dd 和 cc 处在不同的层叠上下文.
aa 建立了一个层叠上下文, 这个层叠上下文包括 bb 和 cc. bb 和 cc 的 z-index 相同, 因此根据其代码顺序, cc 叠于 bb 之上. 而 bb 和 cc 本身也建立层叠上下文, dd 处在 bb 的层叠上下文中, 由于 bb 本身已经被 cc 盖住了, 因此 dd 的 z-index 不会和 cc 比, 只能和 bb 内部的其他元素比.
网上搜索到的原因

---

目前想到的解决方案：

父级相邻元素设置固定层级，当鼠标移入，当前父元素层级设置成最大，就可避免左右元素无法被覆盖问题

// 监听鼠标悬浮 处理父元素绝对定位 当前绝对定位元素不能覆盖与其父元素同级的绝对定位元素
// 设置 当前鼠标悬浮的元素 层级比其他的都大 就可覆盖其他元素
$(document).ready(function(){
	$(".listWrap").mouseover(function(){
		$(this).css("zIndex","99");
	});
	$(".listWrap").mouseleave(function(){
		$(this).css("zIndex","30");
	});
});