Position absolute and z-index not working in bootstrap version 5

Question

The class(.title-image), has a "position: absolute" and the section(#features), has "position: relative" in external CSS. the idea is to place the section(#features) in front of the class(.title-image) using "z-index:1". It works in bootstrap version version 4, but doesn't work in bootstrap version 5

• HTMl

   <!-- Bootstrap CSS link -->
  
   <link
     href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
     rel="stylesheet"
     integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
     crossorigin="anonymous"
   />
  
   <!-- Google Fonts link -->
  
   <link
     href="https://fonts.googleapis.com/css2?family=Montserrat&family=Ubuntu&display=swap"
     rel="stylesheet"
   />
  
   <!-- Bootstrap Icon link -->
  
   <link
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
   />
  
   <!-- FontAwesome Icon Link -->
  
   <script
     src="https://kit.fontawesome.com/5302134694.js"
     crossorigin="anonymous"
   ></script>
  
   <!-- External CSS link -->
  
   <link rel="stylesheet" href="css/styles.css" />
   <title>TinDog</title>
  

   <section id="title">
     <!-- Nav Bar -->
     <div class="container-fluid">
       <nav class="navbar navbar-expand-lg navbar-dark">
         <a class="navbar-brand" href="#">tindog</a>
         <button
           class="navbar-toggler"
           type="button"
           data-bs-toggle="collapse"
           data-bs-target="#navMenu"
           aria-controls="navMenu"
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navMenu">
           <ul class="navbar-nav ms-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 class="btn btn-dark btn-lg download-button" type="button">
             <i class="bi bi-apple"></i> Download
           </button>
           <button
             class="btn btn-outline-light btn-lg download-button"
             type="button"
           >
             <i class="fa-brands fa-google-play"></i>
             Download
           </button>
         </div>
  
         <div class="col-lg-6">
           <img
             src="images/iphone6.png"
             class="title-image"
             alt="iphone-mockup"
           />
         </div>
       </div>
     </div>
   </section>
  
   <!-- Features -->
  
   <section id="features">
     <div class="row">
       <!-- Column 1 -->
  
       <div class="feature-box col-lg-4">
         <i class="feature-icon fas fa-check-circle fa-4x"></i>
         <h3>Easy to use.</h3>
         <p>So easy to use, even your dog could do it.</p>
       </div>
  
       <!-- Column 2 -->
  
       <div class="feature-box col-lg-4">
         <i class="feature-icon fas fa-bullseye fa-4x"></i>
         <h3>Elite Clientele</h3>
         <p>We have all the dogs, the greatest dogs.</p>
       </div>
  
       <!-- Column 3 -->
  
       <div class="feature-box col-lg-4">
         <i class="feature-icon fas fa-heart fa-4x"></i>
         <h3>Guaranteed to work.</h3>
         <p>Find the love of your dog's life or your money back.</p>
       </div>
  
       <!-- End of Column -->
     </div>
   </section>
  
   <!-- Testimonials -->
  
   <section id="testimonials">
     <div
       id="test-carousel"
       class="carousel slide"
       data-bs-ride="carousel"
       data-bs-interval="3000"
     >
       <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="test-image"
             src="images/dog-img.jpg"
             alt="dog-profile"
           />
           <em>Pebbles, New York</em>
         </div>
         <div class="carousel-item">
           <h2>
             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="test-image"
             src="images/lady-img.jpg"
             alt="lady-profile"
           />
           <em>Beverly, Illinois</em>
         </div>
       </div>
       <button
         class="carousel-control-prev"
         type="button"
         data-bs-target="#test-carousel"
         data-bs-slide="next"
       >
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Previous</span>
       </button>
       <button
         class="carousel-control-next"
         type="button"
         data-bs-target="#test-carousel"
         data-bs-slide="prev"
       >
         <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Next</span>
       </button>
     </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/bizinsider.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">
       <!-- Card Style Number 1 -->
  
       <div class="pricing-column col-lg-4 col-md-6">
         <div class="card">
           <h3 class="card-header">Chihuahua</h3>
           <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
               class="w-100 btn btn-lg btn-block btn-outline-primary"
               type="button"
             >
               Sign Up
             </button>
           </div>
         </div>
       </div>
  
       <!-- Card Style Number 2 -->
  
       <div class="pricing-column col-lg-4 col-md-6">
         <div class="card">
           <h3 class="card-header">Labrador</h3>
           <div class="card-body">
             <h2>$49 / mo</h2>
             <p>Unlimited Matches</p>
             <p>Unlimited Messages</p>
             <p>Unlimited App Usage</p>
             <button
               class="w-100 btn btn-lg btn-block btn-primary"
               type="button"
             >
               Sign Up
             </button>
           </div>
         </div>
       </div>
  
       <!-- Card Style Number 3 -->
  
       <div class="pricing-column col-lg-4">
         <div class="card">
           <h3 class="card-header">Mastiff</h3>
           <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
               class="w-100 btn btn-lg btn-block btn-primary"
               type="button"
             >
               Sign Up
             </button>
           </div>
         </div>
       </div>
  
       <!-- End of Card Style -->
     </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 TinDog</p>
   </footer>
  
   <!-- Bootstrap JQuery and JavaScript link -->
  
   <script
     src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
     integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
     crossorigin="anonymous"
   ></script>
   <script
     src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
     integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
     crossorigin="anonymous"
   ></script>
  

• CSS

    body {
      font-family: "Montserrat";
    }
    
    #title {
      background-color: #ff4c68;
      color: #fff;
    }
    
    .container-fluid {
      padding: 3% 15%;
    }
    
    h1 {
      font-family: "Montserrat-Black";
      font-size: 4.5rem;
      line-height: 1.5;
      font-weight: 900;
    }
    
    h2 {
      font-family: "Montserrat-Bold";
      font-size: 3rem;
      line-height: 1.5;
    }
    
    h3 {
      font-family: "Montserrat-Bold";
      font-weight: bold;
    }
    
    p {
      color: #8f8f8f;
    }
    
    /* Navigation Bar */
    .navbar {
      padding: 0 0 4.5rem;
    }
    
    .navbar-brand {
      font-family: "Ubuntu";
      font-size: 2.5rem;
      font-weight: bold;
    }
    
    .nav-item {
      padding: 0 18px;
    }
    .nav-link {
      font-size: 1.2rem;
      font-family: "Montserrat-Light ";
    }
    
    /* Download Buttons */
    
    .download-button {
      margin: 5% 3% 5% 0;
    }
    
    /* Title Image */
    
    .title-image {
      width: 60%;
      transform: rotate(25deg);
      position: absolute;
    }
    
    /* Features Section */
    
    #features {
      padding: 7% 15%;
      background-color: #fff;
      position: relative;
      z-index: 1;
    }
    
    .feature-icon {
      color: #ef8172;
      margin-bottom: 1rem;
    }
    .feature-icon:hover {
      color: #ff4c68;
    }
    
    .feature-box {
      text-align: center;
      padding: 4.5%;
    }
    
    /* Testimonials Section */
    
    #testimonials {
      text-align: center;
      background-color: #ef8172;
      color: #fff;
    }
    
    .carousel-item {
      padding: 7% 15%;
    }
    
    .test-image {
      width: 10%;
      border-radius: 100%;
      margin: 20px;
    }
    
    #press {
      background-color: #ef8172;
      text-align: center;
      padding-bottom: 3%;
    }
    
    .press-logo {
      width: 15%;
      margin: 20px 20px 50px;
    }
    
    /* Pricing Section */
    
    #pricing {
      padding: 7% 15%;
      text-align: center;
    }
    
    .pricing-column {
      padding: 4% 2%;
    }

Answer 1

so after long hours of research, I noticed some people had already done it on github, using the current bootstrap version 5, tutors should be able to explain concepts for future emergencies. all I needed to do was to add another class to the class "Image-title" and set the position to relative like this;

Html;

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

and then set the position of positioning to relative like so:

/* Title Image */

.positioning {
  position: relative;
}

.title-image {
  width: 55%;
  transform: rotate(25deg);
  position: absolute;
}