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

I dont know but my paragraph goes behind of my navbar I am new in html and css Below is the code

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

Okay as you can see the text is hidden behind the navbar, I don't know why this happens. Also, I'm a beginner in HTML and CSS.

Thanks in Advance

Solution

This is happening because nav has been assigned position: fixed to the top , so now whatever the height of nav is occupied on the screen that will remain fixed i.e. allocated to it no matter what and other content on the body will operate in normal behavior neglecting the position of nav so assigning a padding space equal to the nav height may resolve the issue.

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>