溢出隐藏

Question

我希望我的导航栏始终粘在顶部，即使我滚动时也是如此，但是当我滚动时，我的卡片内容不会被剪切，所以它的内容在我的导航栏顶部，我不明白我错过了什么？有什么想法吗？我正在使用 bootstrap 5.

nav {
  background-color: black;
  position: sticky;
  overflow: hidden;
  top: 0px;
  padding: 0;
  border: 2px solid green;
}

.nav {
  color: lightgrey;
  float: left;
  margin: 1vw;
}

<nav>
  <a href="../../index.html" class="nav">Home</a>
  <a href="./products.html" class="nav">Products</a>
  <a href="./about.html" class="nav">About us</a>
  <a href="./contact.html" class="nav">Contact</a>
</nav>

<main class="container">
  <div class="row gy-3">
    <div class="col-md-3">
      <div class="card">
        <img src="https://via.placeholder.com/99" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text
           to build on the card title and make up the 
            bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </main>

我还尝试将 img 放在我的卡中的 div 中并使用 overflow:hidden;...它没有用。

Answer 1

如果导航栏应该在窗口的顶部一直不动，请使用

position: fixed

而不是

sticky

Answer 2

将一些 z-index 放到你的导航中。像

z-index: 10;

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index