css - Material-UI 中的 TextField 进入页眉区域
问题描述
滚动页面时,TextField
页面上的header
区域可见。header
是用 css 创建的,我使用的是TextField
from material-ui
。
我以前从未使用 css 创建过标题。在创建标头时,是否可能必须包含一些代码?请参阅下面的代码。
- 任何帮助表示赞赏!提前致谢。
.toolbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #02ABED;
height: 56px;
}
.toolbar__navigation {
display: flex;
height: 100%;
align-items: center;
padding: 0 1rem;
}
.toolbar__logo a {
color: white;
text-decoration: none;
font-size: 1.5rem;
}
.spacer {
flex: 1;
}
.toolbar_navigation-items ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.toolbar_navigation-items li {
padding: 0 0.5rem;
}
.toolbar_navigation-items a {
color: white;
text-decoration: none;
}
.toolbar_navigation-items a:hover,
.toolbar_navigation-items a:active {
color: black;
}
解决方案
如果有人有同样的问题,我通过设置来解决这个问题z-index
,请参见下面的代码:
.toolbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #02ABED;
height: 56px;
z-index: 1;
}
推荐阅读
- wpf - 讲述人在扫描模式下读取隐藏元素
- c# - C# 如何使用我的 adaptername.GetPosition(“some string”)
- .net - 检查值是否与数据类型匹配
- php - 为什么我不能从谷歌云实例插入但可以从中选择
- powershell - 简化 Powershell 搜索脚本
- vba - Excel VBA - 下拉菜单转到特定工作表
- c++ - 不完整的多线程 RayTracer 花费的时间是预期的两倍
- java - JOGL:来自 GLJPanel 的 getGL()?
- ionic-framework - 离子服务不起作用/退出批处理
- apache-flink - 远程调试 Flink 本地集群