时间戳

首页 > 解决方案 > z-index 和变换问题

html - z-index 和变换问题

问题描述

我正在尝试创建一个带有二级和三级子菜单的下拉菜单。子菜单应该从父菜单下方滑出。实际代码有多个嵌套在多个级别中的 div。

我translateY(700px)为辅助菜单元素添加了一个变换，使其从主菜单下方滑动。但是，这会导致三级菜单滑过二级菜单，而不是在其下方。

如果删除了转换，则第三级菜单可以正常工作。在三级菜单上提供了 -1的 A z-index，但这无济于事。我在二级和三级菜单上尝试了 z-index 的其他组合，但它不起作用。

这个网站上有很多相关的问题，但对我来说没有帮助。这是重新创建问题的精简版代码：

.primary-menu {
  position: relative;
  margin-left: 50px;
  z-index: 100;
  background-color: grey;
  height: 50px;
  padding: 20px;
}

.primary-menu:hover~.secondary-menu {
  transform: translateY(0);
  visibility: visible;
  height: 500px;
}

.secondary-menu:hover {
  transform: translateY(0);
  visibility: visible;
  height: 500px;
  /* actually height is not known in advance, this value is put here just for this example */
}

.secondary-menu {
  position: absolute;
  width: 150px;
  top: 50px;
  left: 50px;
  background-color: red;
  transform: translateY(-700px);
  transition: transform 1s;
  visibility: hidden;
}

.category {
  padding: 20px;
  position: relative;
}

.tertiary-menu {
  position: absolute;
  left: 100%;
  visibility: hidden;
  padding: 20px;
  top: 0;
  left: 0;
  transition: left 1s;
  z-index: -1;
  background-color: hotpink;
}

.category:hover .tertiary-menu {
  visibility: visible;
  left: 100%;
}
<div class="primary-menu">Menu</div>
<div class="secondary-menu">
  <div class="category">
    <h4>Mobiles</h4>
    <div class="tertiary-menu">
      <div class="sub-category">
        <h4>Smartphones</h4>
        <div class="product-types">Mobile Cases, Covers</div>
        <div class="product-types">Power Banks</div>
      </div>
      <div class="sub-category">
        <h4>Feature Phones</h4>
        <div class="product-types">Samsung</div>
      </div>
    </div>
  </div>
</div>

沙盒链接在这里

标签： htmlcss

解决方案

您放入“.tertiary-menu”的“z-index”正在工作。

它似乎不起作用的原因是因为“.tertiary-menu”是“.category”的子级。

“.category”的背景是透明的，所以下面的“.tertiary-menu”是可见的。

只需将背景颜色和高度添加到“.category”，它就会看起来像这样。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.primary-menu {
    position: relative;
    margin-left: 50px;
    z-index: 100;
    background-color: grey;
    height: 50px;
    padding: 20px;
}

.primary-menu:hover~.secondary-menu {
    transform: translateY(0);
    visibility: visible;
    height: 500px;
}

.secondary-menu:hover {
    transform: translateY(0);
    visibility: visible;
    height: 500px;
    /* actually height is not known in advance, this value is put here just for this example */
}

.secondary-menu {
    position: absolute;
    width: 150px;
    top: 50px;
    left: 50px;
    background-color: red;
    transform: translateY(-700px);
    transition: transform 1s;
    visibility: hidden;
}

.category {
    padding: 20px;
    position: relative;
    height: 100%;
    background-color: blue;
}

.tertiary-menu {
    position: absolute;
    left: 100%;
    visibility: hidden;
    padding: 20px;
    top: 0;
    left: 0;
    transition: left 1s;
    z-index: -1;
    background-color: hotpink;
}

.category:hover .tertiary-menu {
    visibility: visible;
    left: 100%;
}
<div class="primary-menu">Menu</div>
<div class="secondary-menu">
    <div class="category">
        <h4>Mobiles</h4>
        <div class="tertiary-menu">
            <div class="sub-category">
                <h4>Smartphones</h4>
                <div class="product-types">Mobile Cases, Covers</div>
                <div class="product-types">Power Banks</div>
            </div>
            <div class="sub-category">
                <h4>Feature Phones</h4>
                <div class="product-types">Samsung</div>
            </div>
        </div>
    </div>
</div>

推荐阅读