Saya seorang pemula penuh dengan ini jadi maafkan saya jika jawabannya sangat jelas. Tautan di bagian navbar saya (class="nav-item") semuanya berfungsi di posisi semula, tetapi segera setelah halaman digulir, tautan tersebut tidak lagi berfungsi sebagai tautan.

Saya sudah mencoba mencari-cari jawaban dan berpikir itu mungkin ada hubungannya dengan tautan aktual yang tidak bergerak dengan bilah navigasi yang sebenarnya.

.borderVisible {
  border-style: solid;

}

.headBanner {
  height: 100px;
  width: auto;
}

.logoContainer {
  float: left;
  width: 25%;
  height: 100px;
}

.navLinksContainer {
  float: right;
  width: 70%;
  height: 100px;

  display: grid;
  margin: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.nav-item {
  position:fixed;
  z-index: 1;
}

.mediumContainer {
  height: 100px;
  width: 100%;
  position: relative;
}

body {
  padding-top: 110px;
}

header {
  position: fixed;
}

#header-img {
  display: block;
  height: 100px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  
}

#nav-bar {
  position: fixed;
  top: 0;
  width: 95%;
}
<header id="header">
  <nav id="nav-bar">
    <div class="borderVisible headBanner">

      <div class="borderVisible logoContainer">

      </div>

      <div class="borderVisible navLinksContainer">
        <div class="borderVisible"><a class="nav-item" href="#section1">Section 1</a></div>
        <div class="borderVisible"><a class="nav-item" href="#section2">Section 2</a></div>
        <div class="borderVisible"><a class="nav-item" href="#section3">Section 3</a></div>
      </div>

    </div>
  </nav>
</header>


<div class="borderVisible mediumContainer" id="section1">

</div>

<div class="borderVisible mediumContainer" id="section2">

</div>

<div class="borderVisible mediumContainer" id="section3">

</div>

<div class="borderVisible mediumContainer" id="section4">

</div>

<div class="borderVisible mediumContainer" id="section5">

</div>
-1
JustMicron 13 Mei 2021, 17:21

3 jawaban

Jawaban Terbaik

Tag header Anda harus berada di dalam body, lalu bekerja dengan z-index untuk header. Dalam kode Anda, tautan Anda tidak berfungsi karena div mediumConainer Anda mengarahkan tajuk

.borderVisible {
  border-style: solid;

}

.headBanner {
  height: 100px;
  width: auto;
}

.logoContainer {
  float: left;
  width: 25%;
  height: 100px;
}

.navLinksContainer {
  float: right;
  width: 70%;
  height: 100px;

  display: grid;
  margin: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.nav-item {
  position:fixed;
  z-index: 1;
}

.mediumContainer {
  height: 100px;
  width: 100%;
  position: relative;
}

body {
  padding-top: 110px;
}

header {
  position: fixed;
  z-index:2;
}

#header-img {
  display: block;
  height: 100px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  
}

#nav-bar {
  position: fixed;
  top: 0;
  width: 95%;
  z-index:2;
}
<html>
    <head>
        <title>Product Landing Page</title>
        <link rel="stylesheet" href="CSS/styles.css">
    </head>

   

    <body>
    
     <header id="header">
        <nav id="nav-bar">
            <div class="borderVisible headBanner">

                    <div class="borderVisible logoContainer">

                    </div>

                    <div class="borderVisible navLinksContainer">
                        <div class="borderVisible"><a class="nav-item" href="#section1">Section 1</a></div>
                        <div class="borderVisible"><a class="nav-item" href="#section2">Section 2</a></div>
                        <div class="borderVisible"><a class="nav-item" href="#section3">Section 3</a></div>
                    </div>

            </div>
        </nav>
    </header>
        <div class="borderVisible mediumContainer" id="section1">

        </div>

        <div class="borderVisible mediumContainer" id="section2">
            
        </div>

        <div class="borderVisible mediumContainer" id="section3">
            
        </div>

        <div class="borderVisible mediumContainer" id="section4">
            
        </div>

        <div class="borderVisible mediumContainer" id="section5">
            
        </div>

    </body>
</html>




<!-- test script -->
<script src='https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js'></script>
2
Sfili_81 13 Mei 2021, 14:26

Contoh bagus dari z-index yang mengacaukan pengaturan Anda. Segera setelah Anda mulai menggulir, elemen mediumContainer Anda meluncur di depan navigasi Anda.

Jika Anda menggunakan indeks-z di header Anda dengan nilai, katakanlah, 100 dan tambahkan indeks-z kurang dari 100 ke mediumContainer, Anda seharusnya baik-baik saja

Berikut perbaikannya: https://jsfiddle.net/w0e2jspL/

0
Reinder Wit 13 Mei 2021, 14:26

Jika Anda menetapkan warna latar belakang pada elemen mediumContainer, Anda dapat melihat dengan jelas bahwa elemen tersebut menutupi tautan.

Anda harus meletakkan header (yang merupakan elemen yang diposisikan di blok yang sama dengan elemen mediumContainer di atasnya dengan z-index.

header {
  position: fixed;
  z-index: 1;
}
2
Quentin 13 Mei 2021, 14:27