SCSS样式不工作...Z索引问题？
SCSS样式不工作...Z索引问题？
提问于 2021-01-13 21:09:16
我正在尝试在SCSS中配置我的标头，使所有内容都像这样显示：
然而，我得到了这个：
左侧的容器将搜索字段一直推到右侧。我确信这是html中的问题，或者是scss中的位置/z索引问题，但我无法让它正常工作。
下面是html：
<div>
<input *ngIf="!(isMobile$ | async) && (isOnline$ | async)"
#filterTextInput
id="filter-text-input"
class="gfs-numeric-input"
type="text"
[value]="itemFilterText$ | async"
autocomplete="off"
placeholder="{{'HEADER.SEARCH.PLACEHOLDER' | translate}}"
attr.aria-label="{{'HEADER.SEARCH.PLACEHOLDER' | translate }}"
>
<mat-icon class="search-icon" svgIcon="search-icon"></mat-icon>
</div>这是我的scss：
.worksheet-name-container {
position: absolute;
z-index: -1;
align-content: center;
align-items: center;
width: 100%;.worksheet-name-container是最左边的属性，它显示"Untitled“和"Items”
.search-input {
position: absolute;
z-index: 1;
width: 600px;
height: 44px;
margin-left: -100px;
padding: 2px 8px 2px 16px;
border-radius: 3px;
box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
border: solid 1px #e0e0e0;
background-image: linear-gradient(to bottom, #fafafa, #f3f3f3);
}
.search-icon {
position: fixed;
z-index: 2;
width: 40px;
height: 40px;
padding: 12px;
}有什么建议吗？
Stack Overflow用户
发布于 2021-01-13 21:33:54
你可以用一种更简单的方法来解决这个问题，只需使用Flex-box或Grid，参见下面使用Flex-box的例子。
HTML：
<div class="container">
<span>Your Title</span>
<div class="wrapper">
<input type="search" name="search" id="js-search" placeholder="Search">
<button>My Button</button>
</div>
</div>Scss：
.container {
width: 100%;
display: flex;
place-items: center;
span {
width: fit-content;
}
.wrapper {
flex-basis: 0;
flex-grow: 1;
display: flex;
place-items: center;
justify-content: flex-end;
gap: 2rem;
}
}现在只需向元素添加必要的剩余样式即可。希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65702635
复制相关文章
相似问题
腾讯云开发者
