如何让 z-index 工作?
How to make z-index to work?
我正在编辑一个 Angular 项目,我正在尝试修复以下功能:
我将获得以下行为:
这里是 HTML 代码:
<div class="search-function" ng-click="showInputForm()">
<img src="../images/my_project/search.png">
</div>
<div class="search-form" ng-if="showForm">
<form ng-submit="textSearch()">
<input type="text" autofocus class="search-input" ng-model="text.value" />
</form>
</div>
如您所见,当用户单击搜索图标时会出现白框,但它应该出现在图标上,而不是在图标下方。如何叠加到搜索图标上?
这是 LESS 代码:
.search-function {
margin-left: 30%;
}
.search-form {
padding-left: 15%;
padding-right: 15%;
.search-input {
color: #2b84a6 !important;
background-color: #fff !important;
font-weight: 300;
font-size: 16px;
}
}
我试图将z-index: -1
设置为search-function
class,但它不起作用。
怎么了?
z-index
仅适用于 positioned 元素。由于您没有将 position
属性 的值从默认值 (static
) 更改为未定位,因此 z-index
将无效。设置 position: relative
.
我正在编辑一个 Angular 项目,我正在尝试修复以下功能:
我将获得以下行为:
这里是 HTML 代码:
<div class="search-function" ng-click="showInputForm()">
<img src="../images/my_project/search.png">
</div>
<div class="search-form" ng-if="showForm">
<form ng-submit="textSearch()">
<input type="text" autofocus class="search-input" ng-model="text.value" />
</form>
</div>
如您所见,当用户单击搜索图标时会出现白框,但它应该出现在图标上,而不是在图标下方。如何叠加到搜索图标上?
这是 LESS 代码:
.search-function {
margin-left: 30%;
}
.search-form {
padding-left: 15%;
padding-right: 15%;
.search-input {
color: #2b84a6 !important;
background-color: #fff !important;
font-weight: 300;
font-size: 16px;
}
}
我试图将z-index: -1
设置为search-function
class,但它不起作用。
怎么了?
z-index
仅适用于 positioned 元素。由于您没有将 position
属性 的值从默认值 (static
) 更改为未定位,因此 z-index
将无效。设置 position: relative
.