如何在网站内容上方设置响应式导航栏？

Question

我创建了一个导航栏。当我在移动设备上打开它时，我希望它在网站内容上方有一个透明的背景，而不是将网站内容向下推，这怎么可能使用html，css和js (没有bootstrap)？

Answer 1

​

    body{
      padding: 0;
      margin: 0;
      }
    #navbar {
      position: fixed;
      width: 100%;
      z-index: 1;
      background-color: black;
    }

    @media screen and (max-width: 375px) {
      #navbar{
        background-color: transparent;
      } 
    }

  <nav id="navbar">
    <div style="display: flex; justify-content: space-between;">
    <h3 style="color: orange;">My site</h3>
    <h5 style="color: white;">Some link</h5>
    </div>
  </nav>
  <h1>Hello world!</h1>

​