Question

我正在建立一个网站，但案例研究图像与导航栏重叠。我试过修理它，但我似乎无法解决这个问题。我认为这是导航栏的CSS，但除了这些图像之外，导航栏与其他所有部分重叠。这是我的小提琴，https://jsfiddle.net/sgr0691/7gopqmq9/6/

   <section class="card-case">
    <h1 class="main-header">Case Studies</h1>
     <div class="wrap">
          <!-- First Case Study -->
          <div class="card" style="background-image:'http://farm4.staticflickr.com/3729/12516648584_d9bfc9f762_c.jpg';">
                    <header class="head">
                          <h3>
                        <i class="fa fa-picture-o"></i> <a href="main-blog.html">The Industry<span class="time">1hr ago</a></span></h3>
                    </header>
                    <article>
                          <a href="blog.html">
                          <h2 class="card-header">Exploring a snowy land where all is happy &amp; good.</h2></a>
                          <p>Lorem ipsum dolor sit amet, ut animal contentiones voluptatibus has. Cu wisi insolens vel, mei no tritani laoreet, ei his magna veritus sapientem. Eum harum noster ne, ne mei dicam placerat. Etiam solet lucilius per in./p>
                    </article>
                    <footer class="foot">
                            <img src="images/card-img-min.jpg" alt="" class="profile-pic" />
                            <span class="author"><a href="#">Brock Nunn</a></span>                               
                            <aside class="social">
                              <a class="fa fa-commenting-o" href="main-blog.html"></a>
                              <a class="fa fa-star-half-o"></a>
                            </aside>
                    </footer>  
          </div>
      <!-- Second Case Study -->
        <div class="card" style="background-image:'http://farm4.staticflickr.com/3729/12516648584_d9bfc9f762_c.jpg';">
                  <header class="head">
                    <h3>
                  <i class="fa fa-picture-o"></i><a href="main-blog.html"> The Industry<span class="time">1hr ago</a></span></h3>
                  </header>
                  <article>
                    <a href="blog.html">
                    <h2 class="card-header">Exploring a snowy land where all is happy &amp; good.</h2></a>
                    <p>Lorem ipsum dolor sit amet, ut animal contentiones voluptatibus has. Cu wisi insolens vel, mei no tritani laoreet, ei his magna veritus sapientem. Eum harum noster ne, ne mei dicam placerat. Etiam solet lucilius per in.</p>
                  </article>
                  <footer class="foot">
                    <img src="images/card-img-min.jpg" alt="" class="profile-pic" />
                    <span class="author"><a href="#">Brock Nunn</a></span>

                    <aside class="social">
                      <a class="fa fa-commenting-o" href="main-blog.html"></a>
                      <a class="fa fa-star-half-o"></a>
                    </aside>
                  </footer>
        </div>
    <!-- Third Case Study -->
        <div class="card" style="background-image:'http://farm4.staticflickr.com/3729/12516648584_d9bfc9f762_c.jpg';">            
                  <header class="head">
                    <h3>
                  <i class="fa fa-picture-o"></i> <a href="main-blog.html">The Industry<span class="time">1hr ago</a></span></h3>
                  </header>
                  <article>
                    <a href="blog.html">
                    <h2 class="card-header">Exploring a snowy land where all is happy &amp; good.</h2></a>
                    <p>Lorem ipsum dolor sit amet, ut animal contentiones voluptatibus has. Cu wisi insolens vel, mei no tritani laoreet, ei his magna veritus sapientem. Eum harum noster ne, ne mei dicam placerat. Etiam solet lucilius per in.</p>
                  </article>
                  <footer class="foot">
                    <img src="images/card-img-min.jpg" alt="" class="profile-pic" />
                    <span class="author"><a href="#">Brock Nunn</a></span>                  
                    <aside class="social">
                      <a class="fa fa-commenting-o" href="main-blog.html"></a>
                      <a class="fa fa-star-half-o"></a>
                    </aside>
                  </footer>         
        </div>
        <!-- Fourth Case Study -->
        <div class="card" style="background-image:'http://farm4.staticflickr.com/3729/12516648584_d9bfc9f762_c.jpg';"s>
                  <header class="head">
                    <h3 class="top-header">
                  <i class="fa fa-picture-o"></i><a href="main-blog.html"> The Industry<span class="time">1hr ago</a></span></h3>
                  </header>
                  <article>
                    <a href="blog.html">
                    <h2 class="card-header">Exploring a snowy land where all is happy &amp; good.</h2></a>
                    <p>Lorem ipsum dolor sit amet, ut animal contentiones voluptatibus has. Cu wisi insolens vel, mei no tritani laoreet, ei his magna veritus sapientem. Eum harum noster ne, ne mei dicam placerat. Etiam solet lucilius per in.</p>
                  </article>
                  <footer class="foot">
                    <img src="images/card-img-min.jpg" alt="" class="profile-pic" />
                    <span class="author"><a href="#">Brock Nunn</a></span>

                    <aside class="social">
                      <a class="fa fa-commenting-o" href="main-blog.html"></a>
                      <a class="fa fa-star-half-o"></a>
                    </aside>
                  </footer>
        </div>
</div>

Answer 1

您使用两次header代码与z-index相同，这就是重叠的原因：

header.head {
 z-index: 99;
}

以下是更新后的小提琴：fiddle link

Answer 2

.head{ 
  z-index:0;
 }

只需将z-index应用于你的头类，我就在你的小提琴中尝试了。它的工作。

案例研究图像与Navbar重叠，有没有办法解决这个问题？

2 个答案: