Home Z-index does not work properly even when setting position elements and z-index?

Questions

Z-index does not work properly even when setting position elements and z-index?

December 21, 2021

I have added position like relative and absolute to the elements in my css but it does not work properly.

This is my HTML Code for the title and features section of my website. I want to make the image of the dog appears behind the feature section. I have added the z-index for the feature section as 1 but it doesn’t appear in front of the image.

        <!-- Title -->
    <div class="row">
      <div class="col-lg-6">
        <h1>Meet new and interesting dogs nearby.</h1>

        <button type="button" class="btn btn-dark btn-lg download-button">
          <i class="fab fa-apple"></i> Download
        </button>

        <button
          type="button"
          class="btn btn-outline-light btn-lg download-button"
        >
          <i class="fab fa-google-play"></i> Download
        </button>
      </div>

      <div class="iphone-container col-lg-6">
        <img class="iphone" src="images/iphone6.png" alt="iphone-mockup" />
      </div>
    </div>
  </div>
</section>

<!-- Features -->

<section id="features">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-4">
        <i class="far fa-check-circle fa-4x feature-img"></i>
        <h3>Easy to use.</h3>
        <p class="sub-text">So easy to use, even your dog could do it.</p>
      </div>

      <div class="col-lg-4">
        <i class="fas fa-bullseye fa-4x feature-img"></i>
        <h3>Elite Clientele</h3>
        <p class="sub-text">We have all the dogs, the greatest dogs.</p>
      </div>

      <div class="col-lg-4">
        <i class="fas fa-heart fa-4x feature-img"></i>
        <h3>Guaranteed to work.</h3>
        <p class="sub-text">
          Find the love of your dog's life or your money back.
        </p>
      </div>
    </div>
  </div>
</section>

This is my CSS code

.iphone{
  width: 60%;
  transform: rotate(25deg);
  position: absolute;
  right: 30%;
 }

.iphone-container {
 position: relative;
 }

/* Features */

#features {
 padding: 10% 15%;
 position: relative;
 text-align: center;
 z-index: 1;
 }

Image to the problem with my website

Image of my desired outcome

>Solution :

Please see the CSS changes I made at the bottom under /* additions */. For the #features section, it has a white background by default, and you actually have to declare background-color: white; so that CSS knows to put the white background front of section#title

body {
  font-family: "Montserrat";
}

#title {
  background-color: #000b49;
  color: white;
}

h1 {
  font-family: "Montserrat";
  font-size: 3.5rem;
  line-height: 1.5;
  font-weight: 900;
}

h2 {
  font-family: "Montserrat";
  font-size: 2.5rem;
  font-weight: 500;
}

h3 {
  font-size: 1.5rem;
}

.container-fluid {
  padding: 3% 15%;
}

/* Navigation_bar */

.navbar-brand {
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
}

.navbar {
  padding: 0 0 4.5rem;
}

.nav-item {
  padding: 0 18px;
}

.nav-link {
  font-family: "Montserrat-Light";
  font-size: 1.2rem;
}

.download-button {
  margin: 5% 3% 5% 0;
}

/* Title */

.iphone {
  width: 60%;
  transform: rotate(25deg);
  position: absolute;
  right: 30%;
}

.iphone-container {
  position: relative;
}

/* Features */

#features {
  padding: 10% 15%;
  position: relative;
  text-align: center;
  z-index: 1;
}

.feature-img {
  color: #35589a;
  padding-bottom: 15%;
}

.feature-img:hover {
  color: #c84b31;
}

.sub-text {
  color: #8f8f8f;
}

/* Testimonials */

#testimonials {
  text-align: center;
  background-color: #0f4d92;
  color: white;
}

.testimonial-image {
  width: 10%;
  border-radius: 100%;
  margin: 20px;
}

#press {
  background-color: #0f4d92;
  text-align: center;
  padding: 3%;
}

.press-logo {
  width: 15%;
  margin: 20px 20px 15px;
}

.carousel-item {
  padding: 7% 15%;
}

/* Pricing section */

#pricing {
  padding: 100px;
}

.pricing-col {
  padding: 3% 2%;
  text-align: center;
}

/* additions */

section#features {
  position: relative;
  background-color: white;
  z-index: 1;
}

section#title {
  position: relative;
  z-index: 0;
}


img.iphone {
  height: 400px;
  width: 200px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vietalk</title>

    <!-- Bootstrap  -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
      integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
      crossorigin="anonymous"
    ></script>

    <!-- CSS Style Sheets -->
    <link rel="stylesheet" href="css/styles.css" />
    <!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;0,900;1,400;1,500&family=Ubuntu:ital,wght@0,400;0,700;1,300&display=swap"
      rel="stylesheet"
    />

    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <section id="title">
      <div class="container-fluid">
        <!-- Nav Bar -->
        <nav class="navbar navbar-expand-lg navbar-dark">
          <a class="navbar-brand" href="">tindog</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">
                <a class="nav-link" href="">Contact</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="">Download</a>
              </li>
            </ul>
          </div>
        </nav>

        <!-- Title -->
        <div class="row">
          <div class="col-lg-6">
            <h1>Meet new and interesting dogs nearby.</h1>

            <button type="button" class="btn btn-dark btn-lg download-button">
              <i class="fab fa-apple"></i> Download
            </button>

            <button
              type="button"
              class="btn btn-outline-light btn-lg download-button"
            >
              <i class="fab fa-google-play"></i> Download
            </button>
          </div>

          <div class="iphone-container col-lg-6">
            <img class="iphone" src="https://raw.githubusercontent.com/BrianTruong23/tindog/main/TinDog%20Start%20Here/images/iphone6.png" alt="iphone-mockup" />
          </div>
        </div>
      </div>
    </section>

    <!-- Features -->

    <section id="features">
      <div class="container">
        <div class="row">
          <div class="col-lg-4">
            <i class="far fa-check-circle fa-4x feature-img"></i>
            <h3>Easy to use.</h3>
            <p class="sub-text">So easy to use, even your dog could do it.</p>
          </div>

          <div class="col-lg-4">
            <i class="fas fa-bullseye fa-4x feature-img"></i>
            <h3>Elite Clientele</h3>
            <p class="sub-text">We have all the dogs, the greatest dogs.</p>
          </div>

          <div class="col-lg-4">
            <i class="fas fa-heart fa-4x feature-img"></i>
            <h3>Guaranteed to work.</h3>
            <p class="sub-text">
              Find the love of your dog's life or your money back.
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Testimonials -->

    <section id="testimonials">
      <div
        id="testimonials-carousel"
        class="carousel slide"
        data-ride="carousel"
      >
        <ol class="carousel-indicators">
          <li
            data-target="#carouselExampleIndicators"
            data-slide-to="0"
            class="active"
          ></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        </ol>

        <div class="carousel-inner">
          <div class="carousel-item active">
            <h2>
              I no longer have to sniff other dogs for love. I've found the
              hottest Corgi on TinDog. Woof.
            </h2>
            <img
              class="testimonial-image"
              src="images/dog-img.jpg"
              alt="dog-profile"
            />
            <em>Pebbles, New York</em>
          </div>
          <div class="carousel-item">
            <h2 class="testimonial-text">
              My dog used to be so lonely, but with TinDog's help, they've found
              the love of their life. I think.
            </h2>
            <img
              class="testimonial-image"
              src="images/lady-img.jpg"
              alt="lady-profile"
            />
            <em>Beverly, Illinois</em>
          </div>
        </div>
        <a
          class="carousel-control-prev"
          href="#testimonials-carousel"
          role="button"
          data-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#testimonials-carousel"
          role="button"
          data-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </section>

    <!-- Press -->

    <section id="press">
      <img class="press-logo" src="images/techcrunch.png" alt="tc-logo" />
      <img class="press-logo" src="images/tnw.png" alt="tnw-logo" />
      <img class="press-logo" src="images/vn-logo.png" alt="biz-insider-logo" />
      <img class="press-logo" src="images/mashable.png" alt="mashable-logo" />
    </section>

    <!-- Pricing -->

    <section id="pricing">
      <h2>A Plan for Every Dog's Needs</h2>
      <p>Simple and affordable price plans for your and your dog.</p>

      <div class="row">
        <div class="pricing-col col-lg-4 col-md-6">
          <div class="card">
            <div class="card-header">
              <h3>Chihuahua</h3>
            </div>
            <div class="card-body">
              <h2>Free</h2>
              <p>5 Matches Per Day</p>
              <p>10 Messages Per Day</p>
              <p>Unlimited App Usage</p>
              <button type="button" class="btn btn-dark btn-lg">Sign Up</button>
            </div>
          </div>
        </div>

        <div class="pricing-col col-lg-4 col-md-6">
          <div class="card">
            <div class="card-header">
              <h3>Labrador</h3>
            </div>
            <div class="card-body">
              <h2>$49 / mo</h2>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button type="button" class="btn btn-dark btn-lg">Sign Up</button>
            </div>
          </div>
        </div>

        <div class="pricing-col col-lg-4 col-md-12">
          <div class="card">
            <div class="card-header">
              <h3>Mastiff</h3>
            </div>
            <div class="card-body">
              <h2>$99 / mo</h2>
              <p>Pirority Listing</p>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button type="button" class="btn btn-outline-dark btn-lg">
                Sign Up
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Call to Action -->

    <section id="cta">
      <h3>Find the True Love of Your Dog's Life Today.</h3>
      <button type="button">Download</button>
      <button type="button">Download</button>
    </section>

    <!-- Footer -->

    <footer id="footer">
      <p>© Copyright 2021 TinDog</p>
    </footer>
  </body>
</html>