我遇到了一个不确定如何解决的问题，我相信这可能与职位有关？我试图查找解决方案，但仍然无法弄清楚为什么会发生这种情况。
所以我正在尝试将我的标题(名称(放在我的固定导航栏中。当我尝试这样做时，标题位于灰色背景颜色后面...... 如何将标题放在背景之上？我希望用导航栏修复标题。提前非常感谢！
html {
margin: 0;
background: #ffffff;
}
body {
margin: 0;
background: #ffffff;
}
/*---font---*/
@font-face {
font-family: open-sans;
src: url('open-sans.regular.ttf');
}
@font-face {
font-family: Prata-Regular;
src: url('Prata-Regular.ttf');
}
@font-face {
font-family: Frontage-Outline;
src: url('Frontage-Outline.otf');
}
/*---nav bar---*/
h1 {
display: inline-block;
float: left;
position: fixed;
z-index: -1;
}
ul {
list-style-type: none;
background-color: #F5F5F5;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
display: inline-block;
}
li {
float: right;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: open-sans;
}
li a:hover:not(.active) {
color: #555555;
}
.active {
color: #000;
}<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--nav bar-->
<div class="navbar">
<div class="bar">
<h1>cindy le</h1>
<ul>
<li><a href="#about">about</a></li>
<li><a href="#work">work</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
</div>
</body>
</html>将 h1 的 z 索引更改为 1
html {
margin: 0;
background: #ffffff;
}
body {
margin: 0;
background: #ffffff;
}
/*---font---*/
@font-face {
font-family: open-sans;
src: url('open-sans.regular.ttf');
}
@font-face {
font-family: Prata-Regular;
src: url('Prata-Regular.ttf');
}
@font-face {
font-family: Frontage-Outline;
src: url('Frontage-Outline.otf');
}
/*---nav bar---*/
h1 {
display: inline-block;
float: left;
position: fixed;
z-index: 1; /* Change to 1*/
}
ul {
list-style-type: none;
background-color: #F5F5F5;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
display: inline-block;
}
li {
float: right;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: open-sans;
}
li a:hover:not(.active) {
color: #555555;
}
.active {
color: #000;
}<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--nav bar-->
<div class="navbar">
<div class="bar">
<h1>cindy le</h1>
<ul>
<li><a href="#about">about</a></li>
<li><a href="#work">work</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
</div>
</body>
</html>最好的方法是修复导航栏div，然后将div 向左浮动，并在右侧包含 h1 标签和div，并包含 ul。我不会浮动 h1 和 ul。如下所示：
.navbar{
position: fixed;
width: 100%;
top: 100%;
left: 100%;
background-color: #f5f5f5;
}
.navbar-left{
float left;
text-align: left;
}
.navbar-right{
float: right;
text-align: right;
}
.navbar ul{
display: inline-block;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.navbar ul li{
float: left;
}
.navbar ul li a{
display: block;
padding: 14px 16px;
color: #555555;
font-family: open-sans;
}
.navbar ul li a:hover{
color: #000;
}
.clear{
clear: both;
}
<div class="navbar">
<div class="navbar-left">
<h1>header text</h1>
</div>
<div class="navbar-left">
<ul>
<li><a href="#about">about</a></li>
<li><a href="#work">work</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
对不起格式。使用手机发帖。