在Bootstrap导航栏后面很难定位图片（Z-index）。

Question

这是导航栏的布局

<header id="navigation-bar" class="nav-header">
      <nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#">
      <img src="images/logo.svg" alt="logo-icon">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">How we work <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item item2 active">
          <a class="nav-link" href="#">Blog<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item item2 active">
          <a class="nav-link" href="#">Account <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item active">
          <a class="nav-link nav-btn-link" href="#"><button class="nav-btn btn btn-outline-dark">View Plans</button><span class="sr-only">(current)</span></a>
        </li>
      </ul>
    </div>
  </nav>
    </header>

bg-img1是我想放在导航条后面的图片。

<section id="Heading">
    <img class="bg-img1" src="images/bg-pattern-intro-right-desktop.svg" alt="bg-pattern-left">
    <div class="container-1">
      <div class="heading-text">

我试着在导航条周围放一个头，然后定位z-index，但似乎并不公正。

.nav-header {
  position: relative;
  padding: 1%;
  z-index: 10000;
}

这是我如何定位我的图片。

.bg-img1 {
  position: absolute;
  right: 0;
  width: 40%;
  top: 3%;
  z-index: 2;
}

Answer 1

你做的一切都是正确的，但因为你给了 src 对你的 img 属性，因此，它将被视为一个图像，不会出现在 navbar 但在前面。

而不是给 src 到您的图像，您可以使用 CSS background property 为您 img 属性，这将使 img 出现在导航条后面。所以不需要任何 z-index

.bg-img1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://images.unsplash.com/photo-1590845947667-381579052389?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60) no-repeat;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<section id="Heading">
  <img class="bg-img1" alt="bg-pattern-left">
  <div class="container-1">
    <div class="heading-text">
    </div>
  </div>
</section>

<header id="navigation-bar " class="nav-header">
  <nav class="navbar bg-dark navbar-expand-lg">
    <a class="navbar-brand" href="#">
      <img src="https://placehold.it/20x20" alt="logo-icon">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">How we work <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item item2 active">
          <a class="nav-link" href="#">Blog<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item item2 active">
          <a class="nav-link" href="#">Account <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item active">
          <a class="nav-link nav-btn-link" href="#"><button class="nav-btn btn btn-outline-dark">View
                  Plans</button><span class="sr-only">(current)</span></a>
        </li>
      </ul>
    </div>
  </nav>
</header>