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

Question

我不知道，但我的段落落后于我的导航栏我是 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>

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;
}

Here's the result

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

提前致谢

Answer 1

发生这种情况是因为 nav 已分配给 position: fixed 到顶部，所以现在无论 nav 的高度在屏幕上占据多少，都将保持 fixed即分配给它，无论什么，body 上的其他内容都将以正常行为运行，忽略 nav 的位置，因此分配 padding space 等于 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;
}

<!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>

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

Why the paragraph is hidden behind navbar however navbar comes first in html source?

html

css

nav