如何在固定导航中添加标题？
如何在固定导航中添加标题？
提问于 2018-08-20 05:50:23
我遇到了一个问题，我不知道如何解决，我相信这可能与职位有关？我试图寻找解决方案，但仍然不能弄清楚为什么会发生这种情况。
所以我试着把我的头(名字)放在我固定的导航栏里。当我尝试这样做时，页眉位于灰色背景颜色后面...如何将标题置于背景之上？我想要用导航栏修复标题..提前谢谢你！
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>
回答 2
Stack Overflow用户
发布于 2018-08-20 06:02:30
将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>
Stack Overflow用户
发布于 2018-08-20 07:19:44
最好的方法是修复导航栏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>很抱歉格式化了。用手机发帖。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51922099
复制相关文章
相似问题