Question

我的用例如下：

我有一个包含多条消息的应用程序（比如一个聊天应用程序）。 HTML将是这样的：

<div class="container">
    <div class="message">
        <div class="picture"><img /></div>
        <div class="message">My message</div>
    </div>
    <div class="message">
        <div class="picture"><img /></div>
        <div class="message">My second message</div>
    </div>
</div>

这就是我所做的。但在我的应用程序中，我需要能够单击图片以显示旁边的菜单。这一点没问题。

但是，当我遇到麻烦时，我会尝试在聊天和菜单之间显示叠加层。

我试过这段代码：

<div class="container">
    <div class="message">
        <div class="picture">
            <img />
            <div class="menu">...</div>
        </div>
        <div class="message">My message</div>
    </div>
    <div class="message">
        <div class="picture"><img /></div>
        <div class="message">My second message</div>
    </div>
</div>
<div class="backdrop"></div>

使用这个CSS：

.picture {
    position: relative;
}

.menu {
    position: absolute;
    z-index: 100;
}

.backdrop {
    position: absolute;
    z-index: 99;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
}

但这不起作用，我的菜单显示在叠加层下。

另外，我不能把菜单放在.backdrop元素中，因为每张图片都有不同的菜单，链接到diff

修改

我有关于我的问题的更多信息。

实际上，.container阻止为position: absolute; z-index: 3;

这是演示我的问题的小提琴：https://jsfiddle.net/e9kcaau2/

我也试过我的叠加层z-index: 3;，但它仍无效

显示绝对div高于另一个绝对div

0 个答案: