Question

我正在尝试制作一个CSS3动画菜单，但我遇到的问题是低索引元素出现在包含元素的顶部，这会破坏“滑出”效果。

HTML是：

<html>
  <head><title>CSS3 Experiments</title></head>
  <body class="menu-metal effect-hovermenu">
    <div id="main">
      <div id="container">
        <ul>
          <li>
            <div class="name"><span>Effect: Hover Menu</span></div>
            <div class="short"><span>Display menu on hover</span></div>
            <div class="long"><span>A CSS3-transition enabled hover menu based on the design at http://www.webdesignerwall.com/demo/css3-dropdown-menu/ .</span></div>
          </li>
        </ul>
          </div>
    </div>
  </body>
</html>

精简的相关CSS是

.effect-hovermenu #container li {
  overflow: visible;
  z-index: 5;
  position: relative;
}
.effect-hovermenu #container li .short {
  position: absolute;
  width: 100%;
  left: 0%;
  top: 5px;
  z-index: -1000;
  opacity: 1 !important;
  color: black;
  transition-property: all;
  transition-duration: 150ms;
  transition-timing-function: ease-in;
  visibility: hidden;
}
.effect-hovermenu #container li:hover .short {
  left: 110%;
  visibility: visible;
}

http://jsfiddle.net/scottrabin/FxZrz/提供了该问题的工作演示。我尝试在多个元素上设置position属性，修改z-index值，overflow，最后意识到我在黑暗中拍摄并且没有接近答案。< / p>

特别是，不希望的效果是悬停在元素上;在过渡期间，文本切换到visibility: visible;，并立即呈现在按钮元素的顶部。理想的行为是在ul下方渲染元素，因此它似乎从菜单的“后面”滑出。

Answer 1

在元素中设置z-index时，您将创建堆叠上下文。元素中的每个元素现在都是其堆叠上下文的一部分，不能出现在它下面。默认情况下，所有元素都是 root 堆叠上下文的一部分。

This documentation可以帮助您解决问题。

负z-index元素出现在包含元素的背景之上

1 个答案: