如何將Flexbox導航欄固定在屏幕頂部？

Question

有什么非hacky（或不是很hacky）的方法可以將我的flexbox導航欄固定在屏幕頂部，這樣它仍然可以響應，但是無論我向下滾動多遠，我仍然可以看到導航欄。

這是我的代碼：

 .navbar { display: flex; background: #e74c3c; height: 60px; font-family: 'Nova Flat', cursive; } .navitem { flex: 1; position: relative; top: 2vh; font-size: 1.7em; margin-left: 5vw; } .navitem a { text-decoration: none; color: white; } .dropdown-content { display: none; z-index: 1; color: black; font-size: 0.7em; } .dropdown-content a { color: black; } .dropdown:hover .dropdown-content { display: inline-block; } 

 <div class="navitem"><a href="#">LOGO</a></div> <div class="navitem"><a href="/search">Find Books</a></div> <div class="dropdown navitem"> <a class="profile">My Account</a> <div class="dropdown-content"> <p><a href="/:user_id/profile">My Profile</a></p> <p><a href="/<%= current_user.id %>">My Bookshelf</a></p> <p><a href="/<%= current_user.id %>/add_a_book">Add a new book to your list</a></p> <p><a href="/<%= current_user.id %>/book_list">Detailed Book List</a></p> <p> <%= link_to "Sign Out", destroy_user_session_path, :method => :delete %> </p> </div> </div> 

Answer 1

只需將navbar固定位置即可：

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

Answer 2

給navbar （您甚至沒有包含在HTML代碼中的BTW ...） position: fixed, width: 100% ，並將內容的padding-top為與導航欄高度一樣低。導航欄不會隱藏內容的第一行。

另外，在html和body上添加margin: 0可以防止默認的margin出現。

 html, body { margin:0; } .navbar { position: fixed; width: 100%; display: flex; background: #e74c3c; height: 60px; font-family: 'Nova Flat', cursive; } .navitem { flex: 1; position: relative; top: 2vh; font-size: 1.7em; margin-left: 5vw; } .navitem a { text-decoration: none; color: white; } .dropdown-content { display: none; z-index: 1; color: black; font-size: 0.7em; } .dropdown-content a { color: black; } .dropdown:hover .dropdown-content { display: inline-block; } .content { padding-top: 60px; height: 1200px; background: yellow; } 

 <div class="navbar"> <div class="navitem"><a href="#">LOGO</a></div> <div class="navitem"><a href="/search">Find Books</a></div> <div class="dropdown navitem"> <a class="profile">My Account</a> <div class="dropdown-content"> <p><a href="/:user_id/profile">My Profile</a></p> <p><a href="/<%= current_user.id %>">My Bookshelf</a></p> <p><a href="/<%= current_user.id %>/add_a_book">Add a new book to your list</a></p> <p><a href="/<%= current_user.id %>/book_list">Detailed Book List</a></p> <p> <%= link_to "Sign Out", destroy_user_session_path, :method => :delete %> </p> </div> </div> </div> <div class="content"> lots of content here... </div>