css - 只有部分元素受半透明覆盖影响

Question

我正在尝试为我的单页 Vue 应用程序制作一个搜索叠加层。单击时，由 Vue 渲染的叠加层。

代码笔: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 很棒。因此，要解决您的问题，您可以

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

或

1. 给 #sidebar 一个高于 2 的 z-index，例如z-index: 10 https://codepen.io/anon/pen/ebWjXa