如何在固定导航中放置标题？答案

【问题标题】：How can I put a header in my fixed navigation?如何在固定导航中放置标题？
【发布时间】：2018-08-19 21: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>

【问题讨论】：

如果你想让h1在前面，添加一个正的z-index。您当前正在使用 -1

标签： html css header navigation fixed

【解决方案1】：

将 h1 的 z-index 更改为 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>

【讨论】：

【解决方案2】：

最好的方法是修复导航栏的 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>

抱歉格式化。用手机发帖。

【讨论】：