Question

我正在尝试为我的单页Vue应用程序进行搜索覆盖。点击后，Vue将渲染一个叠加层。

CodePen：https://codepen.io/cyruscuenca/pen/YdVjaq

我对叠加层进行了如下设置：

#searchOverlay {
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}

这是一个不受叠加层影响的元素。

#titleBar {
    width: calc(100% - 250px - 30px);
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #17202a;
    color: #D9CDC7;
    position: absolute;
    background: #212f3d;
    top: 0;
    z-index: 2;
}

查看所附图片以查看页面的实际外观：

image

这是叠加Vue代码的样子：

<div id="searchBtn" v-on:click="searchOverlay = true">Find or start a chat</div>
<div id="searchOverlay" v-on:click="searchOverlay = false" v-if="searchOverlay == true"></div>

这是标题栏HTML的外观：

<div id="titleBar">{{title}}</div>

Answer 1

codepen很棒。因此，要解决您的问题，您可以

将#searchOverlay向上移动两个级别，使其与#sidebar相邻，并将#searchOverlay设置为position: fixed https://codepen.io/anon/pen/PXmBgO

OR

给#sidebar比z-index高2，例如z-index: 10 https://codepen.io/anon/pen/ebWjXa

仅某些元素受半透明覆盖影响

1 个答案: