为什么H1在移动版本中干扰Navbar？

Question

我不知道为什么我的H1在移动版本中干扰Navbar。当我在移动版本中向下滚动Navbar时，H1会干扰Navbar，而我无法解决此问题。我该如何更改代码，以使其有效？

移动版中的图像在这里： https：//i.sstatic.net/sj3vi.jpg

下面的代码：

.banner {
  background-image: url('../../../assets/images/natallia-nagorniak-tA3sJ4u09eU-unsplash.jpg');
  height: 800px;
  background-position: center center;
  background-size: 100%;
}

.content {
  top: 25%;
  left: 5%;
  position: absolute;
}

.content h1 {
  color: black;
  font-size: 3em;
  font-weight: bold;
}

.content a {
  text-decoration: none;
  background-color: var(--primary-color);
  color: #fff;
  padding: 15px 40px;
  border-radius: 5px;
}

.content a:hover {
  background-color: #64cff7;
  color: #fff;
}

.stepBox {
  background-color: #64cff7;
  padding: 20px 20px;
  border-radius: 5px;
  text-align: center;
}

.stepBox h1 {
  font-size: 30px;
  font-weight: bold;
  color: black;
}

.stepBox p {
  font-size: 20px;
  font-style: italic;
  color: #fff;
}

.highlight {
  color: var(--primary-color);
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
}

.cakebox {
  padding: 10px 5px;
}

.cakebox img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 5px;
}

.cakebox h1 {
  font-size: 18px;
  margin-top: 20px;
  font-weight: bold;
}

.viewmorebtn {
  text-decoration: none;
  background-color: #64cff7;
  color: #fff;
  padding: 10px 10px;
  border-radius: 5px;
  font-size: 18px;
}

.viewmorebtn i {
  padding-left: 5px;
}

@media screen and (max-width:600px) {
  .banner {
    height: 600px;
  }
}

<div class="banner">
  <div class="content">
    <h1 class="mb-5">Čerstvé koláče <br/> priamo k tvojim dverám</h1>
    <a routerLink="menu">Objednaj teraz! <i class="bi bi-arrow-right"></i></a>
  </div>
</div>
<!-- step -->
<div class="container mt-5 mb-5">
  <h1 class="text-center">Ako získať <span class="highlight">čerstvé koláče</span></h1>
  <div class="row mt-3">
    <!-- one -->
    <div class="col-lg-4 mt-2">
      <div class="stepBox">
        <h1>1</h1>
        <p>vyberte koláč</p>
      </div>
    </div>
    <!-- two -->
    <div class="col-lg-4 mt-2">
      <div class="stepBox">
        <h1>2</h1>
        <p>vyplnte podrobnosti</p>
      </div>
    </div>
    <!-- three -->
    <div class="col-lg-4 mt-2">
      <div class="stepBox">
        <h1>3</h1>
        <p>doručenie vašej objednávky</p>
      </div>
    </div>
  </div>
</div>

<!-- cakebox -->
<div class="container mt-4 mb-4">
  <h1 class="text-center">Obľúbené produkty</h1>
  <div class="row">
    <div class="col-lg-3 mt-3" *ngFor="let ck of cakeData; index as i">
      <div class="cakebox" *ngIf="i<=3">
        <img src="{{ck.cakeImg}}" />
        <h1>{{ck.cakeName}}</h1>
        <p>{{ck.cakePrice | currency:'EUR'}}</p>
      </div>
    </div>
  </div>
  <a routerLink="menu" class="viewmorebtn">Zobraziť viac<i class="bi bi-arrow-right"></i></a>
</div>

谢谢您的回答！

Answer 1

.content {
  top: 25%;
  left: 5%;
  position: absolute;
}

H1的容器绝对位置。默认z index使其与具有较小z index值的其他元素重叠。

设置z-index .content div和navbar可能有助于解决问题。

.content {
  top: 25%;
  left: 5%;
  position: absolute;
  z-index: 10; /** something smaller than the z-index of the navbar **/
}

.navbar {
   ...
   z-index: 20; /** something bigger than the z-index of .content **/
}