on单击输入框，将焦点放在输入框上并覆盖在屏幕上

Question

我正在尝试用HTML和CSS 实现一些东西

页面的初始状态应类似initialState

on点击搜索框，页面状态应在点击之后

我正在尝试在Angular中实现它。

到目前为止，我实施的是初始状态点击后实现点击后

<div class="search-box" [ngClass]="isOverlay ? 'focus' : 'no-focus'">
<input class="search-text" type ="text" placeholder="Search...">
<a class="search-btn" (click)="toggleOverlay()">
<p class="search"><i class="fas fa-search"></i></p>
</a>
</div>

.search-box {
border-radius: 40px;
padding-top: 10px;
height: 60px;
padding-left: 15px;}
.search-btn {
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;}

叠加html

<div *ngIf="isOverlay" (click)="toggleOverlay()" class="overlay-container"></div>

覆盖css

.overlay-container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(19, 16, 16, 0.7);
z-index: 998;}

我的问题是，当我添加覆盖时，如何突出显示和聚焦搜索文本框。当前，当我切换覆盖时，它隐藏在覆盖后面。我试着点击搜索框进行z索引，但没有成功。有什么想法吗？

Answer 1

当覆盖处于活动状态时，您需要在搜索框中添加一些css。从本质上讲，你想更新搜索框的z索引，使其位于覆盖之上。

search-box {
&.focus {
position: relative;
z-index: 999;
}