使用“圆形堆叠”元素

Question

我的网页上有CSS下拉菜单，jquery对话框和其他jquery组件。

我遇到的问题是下拉菜单需要高于其他jquery组件但在对话框下方，组件需要在对话框之上但在下拉列表下方，对话框需要在下拉列表之上但是在组件下面。

视觉援助：

所以这个问题并不像设置z-index那么容易。

我已经尝试在打开对话框时快速隐藏/显示菜单（有效隐藏菜单，因为它依赖于悬停以保持活动以保持打开状态）。

代码：

$('.allegDropdownMenu').css("display", "none");
$('.allegDropdownMenu').css("display", "");

问题是这段代码似乎执行得太快，以至于他的悬停状态永远不会变为非活动状态。

我添加了10毫秒的超时时间，但这似乎是一种非常混乱和黑客的方式。

所以我想我想知道是否有人对此类问题有任何解决方案？

Answer 1

蓝色框中的伪元素可以覆盖绿色框吗？

div {
  height:2em;
  line-height:2em;
  width:8.5em;
  background:gray;
  position:relative;
  text-align:center;
  text-shadow:0 0 2px white;
}
#blue  {background:#505DDA;z-index:3;}
#red   {background:#DA5050;z-index:2;}
#green {background:#50DA74;}
#blue:after {
  content:'';
  display:inline-block;
  height:2.6em;
  width:2em;
  right:2px;
  bottom:0;
  position:absolute;
  background:#50DA74;
  transform:rotate(-27deg) ;
}

#blue {
  transform:rotateZ(90deg) ;
  transform-origin:7% 80% ;
}
#red {
  transform:rotateZ(27deg);
  transform-origin: 40%;
}
#green {
  transform:rotateZ(-27deg) ;
  transform-origin:right 110%;
}

<div id="blue"> BLUE </div>
<div id="red"> RED </div>
<div id="green"> GREEN</div>

demo http://codepen.io/gc-nomade/pen/vKCeF