Question

我在底部有一些带有小菜单的图像。它们是绝对放置的，因此它们可以彼此重叠。我正在使用z-index（由一些javascript代码操纵）来确定用户哪个图像首先显示在第二个图像之上。

但是，无论菜单中的z索引元素是什么，我都需要将菜单显示在前台。

简化的代码结构：

.parent {
  width: 600px;
  height: 600px;
  position: relative;
}

#child1 {
  position: absolute;
  z-index: 1;
}

#child2 {
  position: absolute;
  z-index: 2;
}

.menu {
  z-index: 9999;
}

<div class="parent">
  <div id="child1">
    <img src="source" alt="img" />
    <div class="menu"></div>
  </div>


  <div id="child2">
    <img src="source" alt="img" />
    <div class="menu"></div>
  </div>
</div>

当我将菜单元素设置为非常高的z-index时，它仍显示在child2图像后面。我使用这种html结构的原因是每个子元素都包裹在可拖放的可移动组件中。

关于如何实现这一目标的任何想法？

//编辑

我正在使用VueJS和Moveable components，它们是通过循环返回的。

Moveable组件具有基于depth变量的zIndex，因此它可以显示在其他图像的顶部。我想做的是使菜单div的z-index值尽可能高，以便使其显示（因为默认情况下它是隐藏的-单击图像会激活菜单），因此它会显示在所有图像的前景中。

.menu {
    min-width: 170px;
    position: absolute;
    justify-content: center;
    background: #FFF;
    border: 1px solid #dedede;
    border-radius: 6px;
    bottom: -70px;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 0.625rem 0.875rem;
    box-shadow: 0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);
    display: none;
}

<Moveable
    v-bind="moveable"
    class="moveable target"
    :style="`width:${image.width}px; height:${image.height}px; zIndex: ${image.depth}`"
    @click.native="handleClick"
    @drag="(transforms) => { handleDrag(transforms, image) }"
    @resize="(transforms) => { handleResize(transforms, image) }"
    @scale="(transforms) => { handleScale(transforms, image) }"
    @scaleEnd="(transforms) => { handleScaleEnd(transforms, image) }"
    @resizeEnd="(transforms) => { handleResizeEnd(transforms, image) }"
    @rotate="handleRotate"
    @warp="handleWarp"
    ref="moveable"
  >
    <img
      :src="image.src"
    >
    <div v-if="guideVisible" class="menu">
      <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            elevation="3"
            class="menu-button"
            @click="handleFlipToFront"
            v-bind="attrs"
            v-on="on"
            icon
          >
            <v-icon>{{ flipFrontIcon }}</v-icon>
          </v-btn>

        </template>
        <span>Bring to front</span>
      </v-tooltip>
    </div>
  </Moveable>

Answer 1

查看w3处的z-index定义：https://www.w3.org/TR/CSS2/visuren.html#z-index

根据堆栈上下文描述了将渲染树绘制到画布上的顺序。堆栈上下文可以包含其他堆栈上下文。从其父堆栈上下文的角度来看，堆栈上下文是原子的。其他堆叠环境中的盒子可能不在其任何盒子之间。

每当您为元素赋予z-index时，该元素就会被视为具有其z-indexes的容器。这意味着，一旦child1具有z-index，child1（在您的情况下为菜单）中的所有内容都只会影响在child1中其他视图的上方还是下方。

在您的情况下，解决此问题的一种方法是找到一种在子项上没有z-index的情况下使其工作的方法，因此菜单仍可以使用z-index呈现所有内容。一种方法是只使用树中定义的顺序。

也来自w3：

在堆叠上下文中具有相同堆叠级别的框将根据文档树顺序从头到尾堆叠。

由于您正在使用Vue，因此只需将关注的项目移到列表的末尾，然后让Vue进行重新渲染即可。

是否可以在另一个Z索引元素中独立设置Z索引？

1 个答案: