为什么该段落隐藏在导航栏后面，但导航栏在 html 源代码中排在第一位？

Question

为什么该段落隐藏在导航栏后面，但导航栏在 html 源代码中排在第一位？

我不知道，但我的段落在我的导航栏后面我是 html 和 css 新手下面是代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> First App </title>
<link rel="stylesheet" href ="style.css">
</head>
<body>
   <header>
        <nav>
            <ul>
                <li class = "a"> <a href = "#"> Google </a></li>
                <li class = "b"> <a href = "#"> Youtube </a></li>
                <li> <a href = "#"> Facebook </a></li>
                <li> <input type="text"> <button> Press Here </button></li> 
            </ul>
        </nav>
   </header>
    <p> 
        Lorem, ipsum dolor sit amet consectetur adipisicin
        g elit. Est tempora quasi ipsum commodi
        . Atque ut officia magnam et eaqu
        e dolorum incidunt? Hic eos
         ipsam assumenda itaque dese
         runt voluptas porro libero?
     </p>            
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

CSS

body {
    background-color:white;
}

nav {
    background-color:blue;
    position:fixed ;
    top:0;
    left:0;
    right:0;
}
li {
    display:inline-block;
    padding: 5px;
    margin:10px;
    color:white;
}

li.b:hover {
    border-bottom:red;
}

Run Code Online (Sandbox Code Playgroud)

这是结果

好的，您可以看到文本隐藏在导航栏后面，我不知道为什么会发生这种情况。另外，我是 HTML 和 CSS 的初学者。

提前致谢

Answer 1

Rit*_*pta 5

发生这种情况是因为nav已分配position: fixed到顶部，所以现在无论nav屏幕上的高度是多少，都将保留，fixed即无论如何分配给它，身体上的其他内容将在正常行为中运行而忽略nav如此分配的位置padding空间等于nav height可以解决问题。

body {
    background-color:white;
}

nav {
    background-color:blue;
    /* happening because of this */
    position:fixed ;
    top:0;
    left:0;
    right:0;
}
li {
    display:inline-block;
    padding: 5px;
    margin:10px;
    color:white;
}
/* add this */
p{
padding-top: 75px;
}



li.b:hover {
    border-bottom:red;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> First App </title>
<link rel="stylesheet" href ="style.css">



</head>
<body>
   <header>
        <nav>
            <ul>
                <li class = "a"> <a href = "#"> Google </a></li>
                <li class = "b"> <a href = "#"> Youtube </a></li>
                <li> <a href = "#"> Facebook </a></li>
                <li> <input type="text"> <button> Press Here </button></li>

            </ul>

        </nav>


   </header>
  
    <p> 
        Lorem, ipsum dolor sit amet consectetur adipisicin
        g elit. Est tempora quasi ipsum commodi
        . Atque ut officia magnam et eaqu
        e dolorum incidunt? Hic eos
         ipsam assumenda itaque dese
         runt voluptas porro libero?
         Lorem, ipsum dolor sit amet consectetur adipisicin
         g elit. Est tempora quasi ipsum commodi
         . Atque ut officia magnam et eaqu
         e dolorum incidunt? Hic eos
          ipsam assumenda itaque dese
          runt voluptas porro libero?
          Lorem, ipsum dolor sit amet consectetur adipisicin
        g elit. Est tempora quasi ipsum commodi
        . Atque ut officia magnam et eaqu
        e dolorum incidunt? Hic eos
         ipsam assumenda itaque dese
         runt voluptas porro libero?
         Lorem, ipsum dolor sit amet consectetur adipisicin
         g elit. Est tempora quasi ipsum commodi
         . Atque ut officia magnam et eaqu
         e dolorum incidunt? Hic eos
          ipsam assumenda itaque dese
          runt voluptas porro libero?
         
        </p>
    
           
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，4 月前
查看次数：	55 次
最近记录：	5 年，4 月前